/* ─── RESET & BASE ─────────────────────────────────────────── */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --c-bg: #050b18;
     --c-bg2: #081121;
     --c-blue: #0ea5e9;
     --c-indigo: #6366f1;
     --c-purple: #a855f7;
     --c-cyan: #22d3ee;
     --c-white: #f0f6ff;
     --c-muted: #7e8fac;
     --c-card: rgba(14, 165, 233, .07);
     --c-border: rgba(14, 165, 233, .18);
     --grad-main: linear-gradient(135deg, #0ea5e9, #6366f1, #a855f7);
     --grad-blue: linear-gradient(135deg, #0ea5e9, #22d3ee);
     --font-main: 'Inter', sans-serif;
     --font-head: 'Space Grotesk', sans-serif;
     --transition: .35s cubic-bezier(.4, 0, .2, 1);
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-main);
     background: var(--c-bg);
     color: var(--c-white);
     overflow-x: hidden;
 }

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

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

 ul {
     list-style: none;
 }

 button {
     cursor: pointer;
     border: none;
     background: none;
     font-family: inherit;
 }

 /* ─── SCROLLBAR ───────────────────────────────────────────── */
 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background: var(--c-bg);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--c-indigo);
     border-radius: 4px;
 }

 /* ─── PARTICLES CANVAS ────────────────────────────────────── */
 #particles-canvas {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
 }

 /* ─── NAVIGATION ──────────────────────────────────────────── */
 .navbar {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 0 45px 0 45px;
     height: 90px;
     width: min(92vw, 1600px);
     background: rgba(8, 14, 30, 0.55);
     backdrop-filter: blur(24px) saturate(160%);
     -webkit-backdrop-filter: blur(24px) saturate(160%);
     border: 1px solid rgba(99, 102, 241, 0.22);
     border-radius: 60px;
     box-shadow:
         0 4px 32px rgba(0, 0, 0, 0.45),
         0 0 0 1px rgba(255, 255, 255, 0.04) inset;
     transition: all var(--transition);
     animation: navSlideDown .6s cubic-bezier(.4, 0, .2, 1) both;
 }

 @keyframes navSlideDown {
     from {
         opacity: 0;
         transform: translateX(-50%) translateY(-24px);
     }

     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
     }
 }

 .navbar.scrolled {
     background: rgba(5, 11, 24, 0.88);
     border-color: rgba(99, 102, 241, 0.38);
     box-shadow:
         0 8px 48px rgba(0, 0, 0, 0.6),
         0 0 0 1px rgba(255, 255, 255, 0.06) inset,
         0 0 24px rgba(99, 102, 241, 0.12);
 }

 /* Logo */
 .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
 }

 .nav-logo img {
     height: 40px;
     width: auto;
     filter: drop-shadow(0 0 8px rgba(99, 102, 241, .5));
     transition: filter var(--transition);
 }

 .nav-logo img:hover {
     filter: drop-shadow(0 0 14px rgba(99, 102, 241, .85));
 }

 /* Center links */
 .nav-links {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 6px;
     background: rgba(255, 255, 255, 0.035);
     border-radius: 40px;
     border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .nav-links li {
     list-style: none;
 }

 .nav-links a {
     display: block;
     padding: 7px 18px;
     border-radius: 30px;
     font-size: .82rem;
     font-weight: 500;
     color: rgba(176, 192, 220, 0.85);
     letter-spacing: .3px;
     position: relative;
     transition: color var(--transition), background var(--transition);
     white-space: nowrap;
 }

 .nav-links a:hover {
     color: #fff;
     background: rgba(99, 102, 241, 0.15);
 }

 .nav-links a.active {
     color: #fff;
     background: rgba(99, 102, 241, 0.2);
 }

 .nav-links a::before {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 16px;
     height: 2px;
     border-radius: 2px;
     background: var(--grad-main);
     transition: transform var(--transition);
 }

 .nav-links a:hover::before,
 .nav-links a.active::before {
     transform: translateX(-50%) scaleX(1);
 }

 /* CTA Button */
 .nav-cta {
     flex-shrink: 0;
     padding: 9px 22px;
     border-radius: 40px;
     font-size: .82rem;
     font-weight: 700;
     letter-spacing: .3px;
     background: var(--grad-main);
     color: #fff;
     box-shadow: 0 0 18px rgba(99, 102, 241, 0.45);
     transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
     white-space: nowrap;
 }

 .nav-cta:hover {
     transform: translateY(-2px) scale(1.04);
     box-shadow: 0 0 32px rgba(99, 102, 241, 0.7);
     filter: brightness(1.1);
 }

 /* Hamburger */
 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     padding: 8px;
     border-radius: 12px;
     border: 1px solid rgba(99, 102, 241, 0.3);
     background: rgba(99, 102, 241, 0.08);
     transition: background var(--transition), border-color var(--transition);
 }

 .hamburger:hover {
     background: rgba(99, 102, 241, 0.18);
     border-color: rgba(99, 102, 241, 0.55);
 }

 .hamburger span {
     display: block;
     width: 20px;
     height: 2px;
     background: var(--c-white);
     border-radius: 2px;
     transition: var(--transition);
 }

 .hamburger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .hamburger.open span:nth-child(2) {
     opacity: 0;
     transform: scaleX(0);
 }

 .hamburger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 /* Mobile menu */
 .mobile-menu {
     position: fixed;
     top: 90px;
     left: 50%;
     transform: translateX(-50%) translateY(-24px);
     width: min(92vw, 960px);
     z-index: 999;
     background: rgba(6, 11, 25, 0.96);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     padding: 20px 24px 28px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     opacity: 0;
     pointer-events: none;
     border-radius: 24px;
     border: 1px solid rgba(99, 102, 241, 0.22);
     box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
     transition: opacity var(--transition), transform var(--transition);
 }

 .mobile-menu.open {
     opacity: 1;
     pointer-events: all;
     transform: translateX(-50%) translateY(0);
 }

 .mobile-menu li {
     list-style: none;
 }

 .mobile-menu a {
     display: block;
     font-size: .95rem;
     font-weight: 500;
     color: var(--c-muted);
     padding: 12px 16px;
     border-radius: 12px;
     transition: color var(--transition), background var(--transition);
 }

 .mobile-menu a:hover {
     color: var(--c-white);
     background: rgba(99, 102, 241, 0.12);
 }

 /* ─── HERO ────────────────────────────────────────────────── */
 .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     z-index: 1;
     padding: 100px 5% 60px;
 }

 .hero-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
     animation: glowPulse 6s ease-in-out infinite alternate;
 }

 .hero-glow.g1 {
     width: 600px;
     height: 600px;
     background: rgba(99, 102, 241, .25);
     top: -150px;
     left: -150px;
 }

 .hero-glow.g2 {
     width: 500px;
     height: 500px;
     background: rgba(168, 85, 247, .2);
     bottom: -100px;
     right: -100px;
     animation-delay: -3s;
 }

 .hero-glow.g3 {
     width: 300px;
     height: 300px;
     background: rgba(14, 165, 233, .2);
     top: 40%;
     left: 50%;
     animation-delay: -1.5s;
 }

 @keyframes glowPulse {
     from {
         opacity: .6;
         transform: scale(1);
     }

     to {
         opacity: 1;
         transform: scale(1.15);
     }
 }

 /* Split layout: sol metin + sağ terminal */
 .hero-split {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
     width: 100%;
     max-width: 1200px;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     text-align: left;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(99, 102, 241, .15);
     border: 1px solid rgba(99, 102, 241, .35);
     border-radius: 40px;
     padding: 6px 18px;
     font-size: .8rem;
     font-weight: 600;
     color: var(--c-indigo);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 28px;
     animation: fadeUp .8s ease both;
 }

 .hero-badge .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--c-indigo);
     animation: blink 1.4s ease-in-out infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .2
     }
 }

 .hero-title {
     font-family: var(--font-head);
     font-size: clamp(2.4rem, 6vw, 5rem);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -1px;
     animation: fadeUp .9s .1s ease both;
 }

 .hero-title .grad-text {
     background: var(--grad-main);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* Safari fix: typed-wrap, grad-text'in -webkit-text-fill-color:transparent
    mirasını kırar ve metni gradient üzerinde görünür yapar */
 .hero-title .typed-wrap {
     display: inline-block;
     min-width: 2px;
     -webkit-text-fill-color: transparent;
     background: var(--grad-main);
     -webkit-background-clip: text;
     background-clip: text;
 }

 .hero-sub {
     margin: 24px 0 0;
     max-width: 520px;
     font-size: clamp(.95rem, 2vw, 1.15rem);
     color: var(--c-muted);
     line-height: 1.75;
     animation: fadeUp 1s .2s ease both;
 }

 .hero-actions {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 40px;
     animation: fadeUp 1s .35s ease both;
 }

 .btn-primary {
     padding: 14px 36px;
     border-radius: 50px;
     font-weight: 700;
     font-size: .95rem;
     background: var(--grad-main);
     color: #fff;
     box-shadow: 0 0 30px rgba(99, 102, 241, .5);
     transition: transform var(--transition), box-shadow var(--transition);
 }

 .btn-primary:hover {
     transform: translateY(-3px) scale(1.04);
     box-shadow: 0 0 48px rgba(99, 102, 241, .75);
 }

 .btn-outline {
     padding: 14px 36px;
     border-radius: 50px;
     font-weight: 600;
     font-size: .95rem;
     border: 1.5px solid var(--c-border);
     color: var(--c-white);
     background: rgba(14, 165, 233, .06);
     transition: border-color var(--transition), background var(--transition), transform var(--transition);
 }

 .btn-outline:hover {
     border-color: var(--c-blue);
     background: rgba(14, 165, 233, .14);
     transform: translateY(-3px);
 }

 .hero-stats {
     display: flex;
     justify-content: flex-start;
     gap: 32px;
     flex-wrap: wrap;
     margin-top: 56px;
     animation: fadeUp 1s .5s ease both;
 }

 .hero-stat {
     text-align: left;
 }

 .hero-stat .num {
     font-family: var(--font-head);
     font-size: 2.5rem;
     font-weight: 800;
     background: var(--grad-blue);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .hero-stat .lbl {
     font-size: .8rem;
     color: var(--c-muted);
     margin-top: 4px;
 }

 .scroll-indicator {
     position: absolute;
     bottom: 32px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     color: var(--c-muted);
     font-size: .75rem;
     animation: fadeUp 1.2s .8s ease both;
 }

 .scroll-indicator .arrow {
     width: 22px;
     height: 22px;
     border-right: 2px solid var(--c-blue);
     border-bottom: 2px solid var(--c-blue);
     transform: rotate(45deg);
     animation: bounce 1.5s ease-in-out infinite;
 }

 @keyframes bounce {

     0%,
     100% {
         transform: rotate(45deg) translateY(0)
     }

     50% {
         transform: rotate(45deg) translateY(6px)
     }
 }

 /* ─── TERMINAL WIDGET ────────────────────────────────────── */
 .hero-terminal-wrap {
     position: relative;
     z-index: 2;
     animation: fadeUp 1s .4s ease both;
 }

 .terminal-window {
     background: rgba(6, 10, 20, 0.9);
     border: 1px solid rgba(99, 102, 241, 0.35);
     border-radius: 16px;
     overflow: hidden;
     box-shadow:
         0 0 0 1px rgba(255, 255, 255, .04) inset,
         0 24px 80px rgba(0, 0, 0, 0.7),
         0 0 60px rgba(99, 102, 241, 0.12);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }

 .terminal-titlebar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 16px;
     background: rgba(255, 255, 255, 0.04);
     border-bottom: 1px solid rgba(99, 102, 241, 0.2);
 }

 .terminal-dots {
     display: flex;
     gap: 7px;
 }

 .td {
     width: 13px;
     height: 13px;
     border-radius: 50%;
 }

 .td-red {
     background: #ff5f57;
 }

 .td-yellow {
     background: #febc2e;
 }

 .td-green {
     background: #2ac840;
 }

 .terminal-title {
     font-size: .78rem;
     color: rgba(126, 143, 172, 0.7);
     letter-spacing: .5px;
     font-family: 'Courier New', monospace;
 }

 .terminal-body {
     padding: 20px 22px 24px;
     font-family: 'Courier New', monospace;
     font-size: .82rem;
     line-height: 1.8;
     min-height: 240px;
 }

 .term-line {
     display: flex;
     align-items: baseline;
     gap: 6px;
     flex-wrap: wrap;
 }

 .term-out {
     padding-left: 4px;
     color: var(--c-muted);
 }

 .term-prompt {
     color: var(--c-indigo);
     font-weight: 700;
     flex-shrink: 0;
 }

 .term-cmd {
     color: var(--c-white);
 }

 .term-success {
     color: #2ac840;
 }

 .term-info {
     color: var(--c-blue);
 }

 .term-url {
     color: var(--c-cyan);
     text-decoration: underline;
 }

 .term-highlight {
     color: var(--c-purple);
     font-weight: 700;
 }

 .term-blink {
     color: var(--c-blue);
     animation: blink 1s step-end infinite;
 }

 .terminal-glow {
     position: absolute;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 80px;
     background: radial-gradient(ellipse, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
     filter: blur(20px);
     pointer-events: none;
 }

 /* ─── SECTION COMMONS ─────────────────────────────────────── */
 section {
     position: relative;
     z-index: 1;
 }

 .section-inner {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 5%;
 }

 .section-label {
     display: inline-block;
     font-size: .75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--c-blue);
     margin-bottom: 12px;
 }

 .section-title {
     font-family: var(--font-head);
     font-size: clamp(1.8rem, 4vw, 2.8rem);
     font-weight: 700;
     line-height: 1.2;
 }

 .section-title .grad-text {
     background: var(--grad-main);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .section-desc {
     color: var(--c-muted);
     line-height: 1.75;
     margin-top: 14px;
     max-width: 540px;
     font-size: .95rem;
 }

 /* ─── MARQUEE / INFINITE SCROLL ──────────────────────────── */
 .marquee-section {
     padding: 56px 0;
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 /* Edge fade masks */
 .marquee-section::before,
 .marquee-section::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 160px;
     z-index: 2;
     pointer-events: none;
 }

 .marquee-section::before {
     left: 0;
     background: linear-gradient(to right, var(--c-bg) 0%, transparent 100%);
 }

 .marquee-section::after {
     right: 0;
     background: linear-gradient(to left, var(--c-bg) 0%, transparent 100%);
 }

 .marquee-row {
     overflow: hidden;
 }

 .marquee-track {
     display: flex;
     gap: 16px;
     white-space: nowrap;
     width: max-content;
 }

 .marquee-left {
     animation: marquee-ltr 30s linear infinite;
 }

 .marquee-right {
     animation: marquee-rtl 28s linear infinite;
 }

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

 /* Pill badge */
 .marquee-pill {
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 20px;
     border-radius: 50px;
     background: rgba(14, 165, 233, .06);
     border: 1px solid rgba(14, 165, 233, .18);
     font-family: var(--font-head);
     font-weight: 600;
     font-size: .88rem;
     color: rgba(180, 195, 220, .75);
     letter-spacing: .3px;
     transition: background var(--transition), border-color var(--transition),
         color var(--transition), transform var(--transition), box-shadow var(--transition);
     cursor: default;
 }

 .marquee-pill:hover {
     background: rgba(14, 165, 233, .14);
     border-color: var(--c-blue);
     color: var(--c-white);
     transform: translateY(-3px);
     box-shadow: 0 8px 28px rgba(14, 165, 233, .2);
 }

 /* Alternate row uses purple accent */
 .marquee-pill.mp-alt {
     background: rgba(99, 102, 241, .07);
     border-color: rgba(99, 102, 241, .2);
 }

 .marquee-pill.mp-alt:hover {
     background: rgba(99, 102, 241, .16);
     border-color: var(--c-indigo);
     box-shadow: 0 8px 28px rgba(99, 102, 241, .22);
 }

 .mp-icon {
     font-size: 1.05rem;
     line-height: 1;
 }

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

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

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

     to {
         transform: translateX(0);
     }
 }

 /* ─── SERVICES ────────────────────────────────────────────── */
 .services {
     padding: 96px 0;
 }

 .services-header {
     text-align: center;
     margin-bottom: 64px;
 }

 .services-header .section-desc {
     margin: 14px auto 0;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
 }

 .service-card {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 20px;
     padding: 36px 32px;
     position: relative;
     overflow: hidden;
     transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
     opacity: 0;
     transform: translateY(40px);
 }

 .service-card.visible {
     opacity: 1;
     transform: translateY(0);
     transition: transform .6s cubic-bezier(.4, 0, .2, 1),
         border-color var(--transition), box-shadow var(--transition),
         opacity .6s ease;
 }

 .service-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--grad-main);
     opacity: 0;
     transition: opacity var(--transition);
 }

 .service-card:hover {
     transform: translateY(-8px);
     border-color: var(--c-blue);
     box-shadow: 0 20px 60px rgba(14, 165, 233, .18);
 }

 .service-card:hover::before {
     opacity: .04;
 }

 .service-icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.7rem;
     margin-bottom: 22px;
     background: rgba(14, 165, 233, .1);
     border: 1px solid rgba(14, 165, 233, .2);
     position: relative;
     z-index: 1;
 }

 .service-card h3 {
     font-family: var(--font-head);
     font-size: 1.15rem;
     font-weight: 700;
     margin-bottom: 12px;
     position: relative;
     z-index: 1;
 }

 .service-card p {
     font-size: .9rem;
     color: var(--c-muted);
     line-height: 1.7;
     position: relative;
     z-index: 1;
 }

 .service-card .card-tag {
     display: inline-block;
     margin-top: 20px;
     font-size: .75rem;
     font-weight: 600;
     color: var(--c-blue);
     background: rgba(14, 165, 233, .1);
     padding: 4px 14px;
     border-radius: 20px;
     position: relative;
     z-index: 1;
 }

 /* ─── ABOUT / HAKKIMIZDA ──────────────────────────────────── */
 .about-section {
     padding: 96px 0;
     background: var(--c-bg2);
 }

 .about-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
 }

 /* Sol: metin */
 .about-content .section-title {
     margin-top: 12px;
 }

 .about-stats {
     display: flex;
     align-items: center;
     gap: 0;
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 16px;
     padding: 24px 32px;
 }

 .about-stat {
     flex: 1;
     text-align: center;
 }

 .about-stat-num {
     display: block;
     font-family: var(--font-head);
     font-size: 1.8rem;
     font-weight: 800;
     background: var(--grad-main);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .about-stat-lbl {
     display: block;
     font-size: .75rem;
     color: var(--c-muted);
     margin-top: 4px;
 }

 .about-stat-divider {
     width: 1px;
     height: 40px;
     background: var(--c-border);
     margin: 0 8px;
     flex-shrink: 0;
 }

 /* Sağ: kartlar */
 .about-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .about-card {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 18px;
     padding: 28px 24px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
 }

 .about-card:hover {
     transform: translateY(-5px);
     border-color: var(--c-blue);
     box-shadow: 0 12px 40px rgba(14, 165, 233, .14);
 }

 .about-card-icon {
     font-size: 1.8rem;
     line-height: 1;
 }

 .about-card h4 {
     font-family: var(--font-head);
     font-size: .95rem;
     font-weight: 700;
 }

 .about-card p {
     font-size: .82rem;
     color: var(--c-muted);
     line-height: 1.65;
 }

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

 /* ─── PROCESS ─────────────────────────────────────────────── */
 .process {
     padding: 96px 0;
     position: relative;
     overflow: hidden;
 }

 #process-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }

 .process .section-inner {
     position: relative;
     z-index: 1;
 }

 .process-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .process-steps {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .process-step {
     display: flex;
     gap: 24px;
     padding: 28px 0;
     border-bottom: 1px solid var(--c-border);
     transition: var(--transition);
     opacity: 0;
     transform: translateX(-30px);
 }

 .process-step.visible {
     opacity: 1;
     transform: translateX(0);
     transition: opacity .6s ease, transform .6s ease;
 }

 .process-step:last-child {
     border-bottom: none;
 }

 .step-num {
     flex-shrink: 0;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: .95rem;
     font-family: var(--font-head);
     background: var(--grad-main);
     color: #fff;
     box-shadow: 0 0 20px rgba(99, 102, 241, .4);
 }

 .step-info h4 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 6px;
 }

 .step-info p {
     font-size: .875rem;
     color: var(--c-muted);
     line-height: 1.65;
 }

 .process-visual {
     position: relative;
     padding: 20px;
     opacity: 0;
     transform: translateX(40px);
 }

 .process-visual.visible {
     opacity: 1;
     transform: translateX(0);
     transition: opacity .8s ease, transform .8s ease;
 }

 .visual-box {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 24px;
     padding: 36px;
     overflow: hidden;
     position: relative;
 }

 .code-mock {
     font-family: 'Courier New', monospace;
     font-size: .8rem;
     line-height: 1.9;
     color: var(--c-muted);
 }

 .code-mock .cm-kw {
     color: var(--c-purple);
 }

 .code-mock .cm-fn {
     color: var(--c-blue);
 }

 .code-mock .cm-str {
     color: var(--c-cyan);
 }

 .code-mock .cm-comment {
     color: rgba(126, 143, 172, .5);
 }

 .code-mock .cm-num {
     color: #f59e0b;
 }

 .typing-cursor {
     display: inline-block;
     width: 2px;
     height: 1em;
     background: var(--c-blue);
     margin-left: 2px;
     vertical-align: text-bottom;
     /* Safari: grad-text'ten gelen -webkit-text-fill-color kalıtımını sıfırla */
     -webkit-text-fill-color: transparent;
     -webkit-animation: blink 1s step-end infinite;
     animation: blink 1s step-end infinite;
 }

 .visual-badge {
     position: absolute;
     top: 15px;
     right: 24px;
     background: var(--grad-main);
     color: #fff;
     font-size: .72rem;
     font-weight: 700;
     padding: 5px 14px;
     border-radius: 20px;
     box-shadow: 0 4px 16px rgba(99, 102, 241, .4);
 }

 /* ─── TECH STACK ──────────────────────────────────────────── */
 .tech {
     padding: 96px 0;
 }

 .tech-header {
     text-align: center;
     margin-bottom: 56px;
 }

 .tech-header .section-desc {
     margin: 14px auto 0;
 }

 .tech-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
     gap: 16px;
 }

 .tech-item {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 14px;
     padding: 24px 16px;
     text-align: center;
     font-size: .82rem;
     font-weight: 600;
     color: var(--c-muted);
     transition: var(--transition);
     opacity: 0;
     transform: scale(.85);
 }

 .tech-item.visible {
     opacity: 1;
     transform: scale(1);
     transition: opacity .5s ease, transform .5s ease;
 }

 .tech-item:hover {
     border-color: var(--c-blue);
     color: var(--c-white);
     transform: translateY(-6px) scale(1.04);
     box-shadow: 0 10px 40px rgba(14, 165, 233, .18);
 }

 .tech-item .ti {
     font-size: 2rem;
     margin-bottom: 10px;
 }

 /* ─── SUPPORT / DESTEK ───────────────────────────────────── */
 .support-section {
     padding: 96px 0;
     background: var(--c-bg2);
 }

 .support-header {
     text-align: center;
     margin-bottom: 64px;
 }

 .support-header .section-desc {
     margin: 14px auto 0;
 }

 .support-cards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-bottom: 72px;
 }

 .support-card {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 20px;
     padding: 32px 28px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
 }

 .support-card:hover {
     transform: translateY(-6px);
     border-color: var(--c-blue);
     box-shadow: 0 16px 48px rgba(14, 165, 233, .15);
 }

 .support-card-featured {
     background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .08));
     border-color: rgba(99, 102, 241, .4);
     position: relative;
 }

 .support-card-featured::before {
     content: '';
     position: absolute;
     inset: -1px;
     border-radius: 21px;
     background: linear-gradient(135deg, rgba(99, 102, 241, .5), rgba(168, 85, 247, .4));
     z-index: -1;
     filter: blur(8px);
     opacity: 0;
     transition: opacity var(--transition);
 }

 .support-card-featured:hover::before {
     opacity: 1;
 }

 .support-card-featured:hover {
     border-color: var(--c-indigo);
     box-shadow: 0 16px 48px rgba(99, 102, 241, .25);
 }

 .support-card-icon {
     font-size: 2rem;
     line-height: 1;
 }

 .support-card h3 {
     font-family: var(--font-head);
     font-size: 1rem;
     font-weight: 700;
 }

 .support-card p {
     font-size: .875rem;
     color: var(--c-muted);
     line-height: 1.65;
     flex: 1;
 }

 .support-link {
     display: inline-block;
     font-size: .82rem;
     font-weight: 600;
     color: var(--c-blue);
     transition: color var(--transition), gap var(--transition);
 }

 .support-link:hover {
     color: var(--c-cyan);
 }

 /* ─── FAQ ACCORDION ──────────────────────────────────────── */
 .faq-wrap {
     max-width: 820px;
     margin: 0 auto;
 }

 .faq-title {
     font-family: var(--font-head);
     font-size: 1.5rem;
     font-weight: 700;
     text-align: center;
     margin-bottom: 36px;
 }

 .faq-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .faq-item {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 14px;
     overflow: hidden;
     transition: border-color var(--transition);
 }

 .faq-item:has(.faq-q[aria-expanded="true"]) {
     border-color: rgba(99, 102, 241, .4);
 }

 .faq-q {
     width: 100%;
     background: none;
     border: none;
     padding: 20px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     font-family: inherit;
     font-size: .95rem;
     font-weight: 600;
     color: var(--c-white);
     cursor: pointer;
     text-align: left;
     transition: color var(--transition);
 }

 .faq-q:hover {
     color: var(--c-blue);
 }

 .faq-arrow {
     font-size: 1.2rem;
     flex-shrink: 0;
     display: inline-block;
     transition: transform .3s ease;
     color: var(--c-muted);
 }

 .faq-q[aria-expanded="true"] .faq-arrow {
     transform: rotate(180deg);
     color: var(--c-indigo);
 }

 .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s cubic-bezier(.4, 0, .2, 1),
         padding .3s ease;
 }

 .faq-a.open {
     max-height: 300px;
 }

 .faq-a p {
     padding: 0 24px 20px;
     font-size: .9rem;
     color: var(--c-muted);
     line-height: 1.75;
 }

 /* ─── TESTIMONIALS ────────────────────────────────────────── */
 .testimonials {
     padding: 96px 0;
     background: var(--c-bg2);
 }

 /* Give testimonials section-inner same max-width as site */
 .testimonials .section-inner {
     max-width: 1215px;
     padding: 0 5%;
 }

 .test-header {
     text-align: center;
     margin-bottom: 56px;
 }

 /* Slider wrapper: holds prev btn, viewport, next btn in a row */
 .test-slider-wrapper {
     display: flex;
     align-items: center;
     gap: 20px;
     position: relative;
 }

 /* Viewport: clips horizontally, allows vertical hover lift */
 .test-viewport {
     overflow-x: clip;
     overflow-y: visible;
     flex: 1;
     min-width: 0;
     border-radius: 24px;
     padding: 12px 0;
     margin: -12px 0;
 }

 /* Track: slides horizontally */
 .test-track {
     display: flex;
     gap: 24px;
     transition: transform .55s cubic-bezier(.4, 0, .2, 1);
     will-change: transform;
 }

 /* Card — width set by JS based on viewport */
 .test-card {
     flex-shrink: 0;
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 20px;
     padding: 32px;
     transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
 }

 .test-card:hover {
     transform: translateY(-6px);
     border-color: var(--c-indigo);
     box-shadow: 0 20px 48px rgba(99, 102, 241, .12);
 }

 /* Nav buttons */
 .test-nav-btn {
     flex-shrink: 0;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(99, 102, 241, 0.1);
     border: 1px solid rgba(99, 102, 241, 0.28);
     color: var(--c-white);
     cursor: pointer;
     transition: background var(--transition), border-color var(--transition),
         transform var(--transition), box-shadow var(--transition);
     z-index: 2;
 }

 .test-nav-btn:hover {
     background: rgba(99, 102, 241, 0.28);
     border-color: rgba(99, 102, 241, 0.6);
     transform: scale(1.1);
     box-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
 }

 .test-nav-btn:active {
     transform: scale(0.95);
 }

 .test-nav-btn:disabled {
     opacity: 0.3;
     pointer-events: none;
 }

 /* Dot indicators */
 .test-dots {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 36px;
 }

 .test-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(99, 102, 241, 0.28);
     border: 1px solid rgba(99, 102, 241, 0.3);
     cursor: pointer;
     transition: all var(--transition);
 }

 .test-dot.active {
     background: var(--c-indigo);
     width: 28px;
     border-radius: 4px;
     box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
 }

 /* Stars, text, author */
 .test-stars {
     color: #f59e0b;
     font-size: 1rem;
     margin-bottom: 18px;
 }

 .test-text {
     font-size: .9rem;
     color: var(--c-muted);
     line-height: 1.75;
     margin-bottom: 24px;
 }

 .test-author {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .test-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 1rem;
     color: #fff;
     background: var(--grad-main);
     flex-shrink: 0;
 }

 .test-name {
     font-weight: 700;
     font-size: .9rem;
 }

 .test-role {
     font-size: .78rem;
     color: var(--c-muted);
 }

 /* ─── SUCCESS STORIES ────────────────────────────────────── */
 .success-section {
     padding: 96px 0;
     background: var(--c-bg2);
 }

 .success-header {
     text-align: center;
     margin-bottom: 56px;
 }

 .success-header .section-desc {
     margin: 14px auto 0;
 }

 /* İstatistik bandı */
 .success-stats-band {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0;
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 24px;
     padding: 40px 48px;
     margin-bottom: 64px;
     flex-wrap: wrap;
 }

 .ssb-item {
     flex: 1;
     min-width: 120px;
     text-align: center;
 }

 .ssb-num {
     font-family: var(--font-head);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     background: var(--grad-main);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
 }

 .ssb-label {
     font-size: .8rem;
     color: var(--c-muted);
     margin-top: 8px;
 }

 .ssb-divider {
     width: 1px;
     height: 48px;
     background: var(--c-border);
     margin: 0 24px;
     flex-shrink: 0;
 }

 /* Proje kartları grid */
 .success-grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr;
     gap: 24px;
 }

 .sc-card {
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 20px;
     padding: 32px;
     transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .sc-card:hover {
     transform: translateY(-6px);
     border-color: var(--c-blue);
     box-shadow: 0 20px 60px rgba(14, 165, 233, .14);
 }

 .sc-featured {
     border-color: rgba(99, 102, 241, .4);
     background: linear-gradient(135deg, var(--c-card), rgba(99, 102, 241, .06));
 }

 .sc-featured:hover {
     border-color: var(--c-indigo);
     box-shadow: 0 20px 60px rgba(99, 102, 241, .2);
 }

 .sc-tag-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .sc-tag {
     display: inline-block;
     font-size: .7rem;
     font-weight: 600;
     padding: 4px 12px;
     border-radius: 20px;
     background: rgba(14, 165, 233, .1);
     border: 1px solid rgba(14, 165, 233, .25);
     color: var(--c-blue);
     text-transform: uppercase;
     letter-spacing: .5px;
 }

 .sc-tag-green {
     background: rgba(34, 197, 94, .1);
     border-color: rgba(34, 197, 94, .25);
     color: #22c55e;
 }

 .sc-icon {
     font-size: 2.4rem;
 }

 .sc-title {
     font-family: var(--font-head);
     font-size: 1.1rem;
     font-weight: 700;
     line-height: 1.3;
 }

 .sc-desc {
     font-size: .875rem;
     color: var(--c-muted);
     line-height: 1.7;
     flex: 1;
 }

 .sc-metrics {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     padding: 16px 0;
     border-top: 1px solid var(--c-border);
     border-bottom: 1px solid var(--c-border);
 }

 .sc-metric {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .sc-metric-val {
     font-family: var(--font-head);
     font-size: 1.3rem;
     font-weight: 800;
     background: var(--grad-blue);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .sc-metric-key {
     font-size: .7rem;
     color: var(--c-muted);
     text-transform: uppercase;
     letter-spacing: .5px;
 }

 .sc-tech-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .sc-tech {
     font-size: .72rem;
     font-weight: 600;
     padding: 3px 10px;
     border-radius: 6px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid var(--c-border);
     color: var(--c-muted);
 }

 /* ─── CTA SECTION ─────────────────────────────────────────── */
 .cta-section {
     padding: 96px 0;
 }

 .cta-box {
     background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(168, 85, 247, .1));
     border: 1px solid rgba(99, 102, 241, .3);
     border-radius: 28px;
     padding: 72px 48px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-box::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at center, rgba(99, 102, 241, .15) 0%, transparent 70%);
 }

 .cta-box h2 {
     font-family: var(--font-head);
     font-size: clamp(1.8rem, 4vw, 3rem);
     font-weight: 800;
     position: relative;
     z-index: 1;
 }

 .cta-box p {
     color: var(--c-muted);
     margin: 16px auto 40px;
     max-width: 480px;
     font-size: 1rem;
     line-height: 1.7;
     position: relative;
     z-index: 1;
 }

 .cta-actions {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
     position: relative;
     z-index: 1;
 }

 /* ─── FOOTER ──────────────────────────────────────────────── */
 footer {
     background: var(--c-bg2);
     border-top: 1px solid var(--c-border);
     padding: 64px 5% 32px;
 }

 .footer-inner {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
 }

 .footer-brand .logo-text {
     font-family: var(--font-head);
     font-size: 1.4rem;
     font-weight: 800;
     background: var(--grad-main);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline-block;
     margin-bottom: 16px;
 }

 .footer-brand p {
     font-size: .875rem;
     color: var(--c-muted);
     line-height: 1.7;
     max-width: 260px;
 }

 .footer-socials {
     display: flex;
     gap: 12px;
     margin-top: 24px;
 }

 .social-btn {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     border: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--c-muted);
     transition: var(--transition);
 }

 .social-btn:hover {
     border-color: var(--c-blue);
     color: var(--c-blue);
     background: rgba(14, 165, 233, .1);
     transform: translateY(-3px);
 }

 .footer-col h4 {
     font-size: .85rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--c-white);
     margin-bottom: 20px;
 }

 .footer-col ul {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .footer-col ul li a {
     font-size: .875rem;
     color: var(--c-muted);
     transition: color var(--transition);
 }

 .footer-col ul li a:hover {
     color: var(--c-blue);
 }

 .footer-bottom {
     max-width: 1200px;
     margin: 48px auto 0;
     padding-top: 24px;
     border-top: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
     font-size: .8rem;
     color: var(--c-muted);
 }

 /* ─── ANIMATIONS ──────────────────────────────────────────── */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ─── RESPONSIVE ──────────────────────────────────────────── */
 @media (max-width: 1024px) {
     .footer-inner {
         grid-template-columns: 1fr 1fr;
     }

     .process-inner {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .process-visual {
         transform: none !important;
     }

     .hero-split {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .hero-content {
         text-align: center;
     }

     .hero-sub {
         margin: 24px auto 0;
     }

     .hero-actions {
         justify-content: center;
     }

     .hero-stats {
         justify-content: center;
     }

     .hero-stat {
         text-align: center;
     }
 }

 @media (max-width: 768px) {

     .nav-links,
     .nav-cta {
         display: none;
     }

     .hamburger {
         display: flex;
     }

     .hero-stats {
         gap: 32px;
     }

     .footer-inner {
         grid-template-columns: 1fr 1fr;
     }

     .cta-box {
         padding: 48px 28px;
     }

     /* Slider: show 1 card on mobile */
     .test-card {
         width: 100%;
     }

     .test-nav-btn {
         width: 40px;
         height: 40px;
     }

     .test-slider-wrapper {
         gap: 10px;
     }
 }

 @media (max-width: 480px) {
     .footer-inner {
         grid-template-columns: 1fr;
     }

     .hero-stats {
         display: none;
     }

     .tech-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .nav-logo img {
         height: 30px;
     }

     .hero {
         padding: 160px 3% 50px;
     }

 }

 /* ─── CONTACT FORM ───────────────────────────────────────── */
 .contact-form-wrap {
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     gap: 48px;
     background: var(--c-card);
     border: 1px solid var(--c-border);
     border-radius: 28px;
     padding: 52px 48px;
     margin: 64px 0;
     align-items: start;
     position: relative;
     overflow: hidden;
 }

 .contact-form-wrap::before {
     content: '';
     position: absolute;
     top: -80px;
     right: -80px;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(99, 102, 241, .15) 0%, transparent 70%);
     pointer-events: none;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .contact-info-title {
     font-family: var(--font-head);
     font-size: 1.8rem;
     font-weight: 800;
     line-height: 1.2;
     margin-top: 8px;
 }

 .contact-info-desc {
     font-size: .9rem;
     color: var(--c-muted);
     line-height: 1.7;
 }

 .contact-info-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 4px;
 }

 .contact-info-list li {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: .9rem;
 }

 .contact-info-list a {
     color: var(--c-muted);
     transition: color var(--transition);
 }

 .contact-info-list a:hover {
     color: var(--c-blue);
 }

 .ci-icon {
     font-size: 1.1rem;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(14, 165, 233, .1);
     border: 1px solid rgba(14, 165, 233, .2);
     border-radius: 8px;
     flex-shrink: 0;
 }

 .contact-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: .8rem;
     font-weight: 600;
     color: #22c55e;
     background: rgba(34, 197, 94, .08);
     border: 1px solid rgba(34, 197, 94, .25);
     border-radius: 20px;
     padding: 8px 16px;
     margin-top: 4px;
     width: fit-content;
 }

 .online-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #22c55e;
     animation: pulse-green 2s ease-in-out infinite;
     flex-shrink: 0;
 }

 @keyframes pulse-green {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
     }

     50% {
         box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
     }
 }

 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .cf-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .cf-group {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .cf-group label {
     font-size: .78rem;
     font-weight: 600;
     color: var(--c-muted);
     text-transform: uppercase;
     letter-spacing: .8px;
 }

 .cf-group input,
 .cf-group select,
 .cf-group textarea {
     background: rgba(255, 255, 255, .04);
     border: 1px solid var(--c-border);
     border-radius: 12px;
     padding: 13px 16px;
     font-family: var(--font-main);
     font-size: .9rem;
     color: var(--c-white);
     outline: none;
     transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
     width: 100%;
 }

 .cf-group input::placeholder,
 .cf-group textarea::placeholder {
     color: rgba(126, 143, 172, .5);
 }

 .cf-group select option {
     background: #0d1b2e;
     color: var(--c-white);
 }

 .cf-group input:focus,
 .cf-group select:focus,
 .cf-group textarea:focus {
     border-color: var(--c-indigo);
     background: rgba(99, 102, 241, .06);
     box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
 }

 .cf-group textarea {
     resize: vertical;
     min-height: 130px;
     line-height: 1.6;
 }

 .cf-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: var(--grad-main);
     border: none;
     border-radius: 14px;
     padding: 15px 32px;
     font-family: var(--font-head);
     font-size: .95rem;
     font-weight: 700;
     color: #fff;
     cursor: pointer;
     transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
 }

 .cf-submit:hover {
     opacity: .9;
     transform: translateY(-2px);
     box-shadow: 0 10px 32px rgba(99, 102, 241, .45);
 }

 .cf-submit:active {
     transform: translateY(0);
 }

 .cf-note {
     font-size: .78rem;
     color: var(--c-muted);
     text-align: center;
 }

 @media (max-width: 900px) {
     .contact-form-wrap {
         grid-template-columns: 1fr;
         padding: 36px 24px;
     }

     .cf-row {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 600px) {
     .support-cards {
         grid-template-columns: 1fr 1fr;
     }
 }