/* =========================================
       THEME TOKENS
    ========================================= */
    :root {
      --blue:         #1E6FFF;
      --blue-dim:     rgba(30,111,255,0.12);
      --blue-glow:    rgba(30,111,255,0.35);
      --blue-light:   #5B9BFF;
      --ff-display:   'Space Grotesk', sans-serif;
      --ff-body:      'Inter', sans-serif;
      --ff-mono:      'JetBrains Mono', monospace;
    }

    /* DARK MODE (default) */
    [data-theme="dark"] {
      --bg-primary:   #050D1A;
      --bg-card:      #0A1628;
      --bg-card2:     #0D1C32;
      --bg-card3:     #0F2040;
      --accent:       #1E6FFF;
      --accent-dim:   rgba(30,111,255,0.12);
      --accent-glow:  rgba(30,111,255,0.35);
      --accent-light: #5B9BFF;
      --text-main:    #EEF2FF;
      --text-muted:   #7A90B0;
      --border:       rgba(30,111,255,0.15);
      --border-soft:  rgba(255,255,255,0.06);
      --nav-bg:       rgba(5,13,26,0.94);
      --code-bg:      #071020;
    }

    /* LIGHT MODE */
    [data-theme="light"] {
      --bg-primary:   #F0F5FF;
      --bg-card:      #FFFFFF;
      --bg-card2:     #E8F0FF;
      --bg-card3:     #DDEAFF;
      --accent:       #1251CC;
      --accent-dim:   rgba(18,81,204,0.10);
      --accent-glow:  rgba(18,81,204,0.25);
      --accent-light: #1E6FFF;
      --text-main:    #0D1B35;
      --text-muted:   #4A6080;
      --border:       rgba(18,81,204,0.18);
      --border-soft:  rgba(0,0,0,0.07);
      --nav-bg:       rgba(240,245,255,0.96);
      --code-bg:      #E0EAFF;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--bg-primary);
      color: var(--text-main);
      font-family: var(--ff-body);
      font-size: 1rem;
      line-height: 1.7;
      overflow-x: hidden;
      transition: background .35s, color .35s;
    }
	@media(max-width:767px){
		 body {
		  font-size: 0.9rem;
		  line-height: 1.5;
		}
	}
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
    ::selection { background: var(--accent); color: #fff; }

    /* =========================================
       THEME TOGGLE BUTTON
    ========================================= */
    .theme-toggle {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--accent-dim);
      color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: all .25s;
      flex-shrink: 0;
    }
    .theme-toggle:hover {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 0 16px var(--accent-glow);
    }
    [data-theme="light"] .icon-moon { display: none; }
    [data-theme="dark"]  .icon-sun  { display: none; }

    /* =========================================
       NAVBAR
    ========================================= */
    .nav-custom {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 1rem 0;
      transition: all .35s ease;
      background: transparent;
	  border-bottom: 1px solid transparent;
    }
    .nav-custom.scrolled {
      background: var(--nav-bg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
      padding: .6rem 0;
    }
    .nav-logo {
      font-family: var(--ff-mono);
      font-size: 1.05rem;
      color: var(--accent) !important;
      text-decoration: none;
      letter-spacing: .05em;
    }
    .nav-logo span { color: var(--text-main); }
    .nav-links a {
      font-family: var(--ff-display);
      font-size: .85rem;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-left: 2rem;
      transition: color .2s;
    }
	#mobileMenu .container a{color:var(--text-muted);}
    .nav-links a:hover,.nav-links a.active,#mobileMenu .container a.active{ color: var(--accent); }
    .nav-cta {
      font-family: var(--ff-display);
      font-size: .82rem;
      font-weight: 600;
      background: transparent;
      border: 1px solid var(--accent);
      color: var(--accent) !important;
      padding: .42rem 1.15rem;
      border-radius: 4px;
      text-decoration: none;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: background .2s, box-shadow .2s;
    }
    .nav-cta:hover {
      background: var(--accent-dim);
      box-shadow: 0 0 18px var(--accent-glow);
    }

    /* =========================================
       HERO
    ========================================= */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: 80px;
    }
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 18% 55%, rgba(30,111,255,.08) 0%, transparent 52%),
        radial-gradient(circle at 82% 18%, rgba(30,111,255,.05) 0%, transparent 48%),
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
      background-size: auto, auto, 56px 56px, 56px 56px;
      pointer-events: none;
    }
    /* Animated glow orb */
    #hero::after {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(30,111,255,.07) 0%, transparent 70%);
      top: -100px; right: -150px;
      pointer-events: none;
      animation: orbFloat 8s ease-in-out infinite;
    }
    @keyframes orbFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50%       { transform: translateY(30px) scale(1.05); }
    }

    .hero-eyebrow {
      font-family: var(--ff-mono);
      font-size: .82rem;
      color: var(--accent);
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 1.4rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .hero-eyebrow::before {
      content: '';
      display: inline-block;
      width: 28px; height: 2px;
      background: var(--accent);
    }
    .hero-name {
      font-family: var(--ff-display);
      font-size: clamp(2.8rem, 7vw, 5rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
      margin-bottom: 1rem;
    }
    .hero-name .highlight {
      color: var(--accent);
      position: relative;
    }
    /* underline accent on name */
    .hero-name .highlight::after {
      content: '';
      position: absolute;
      left: 0; bottom: 4px;
      width: 100%; height: 3px;
      background: linear-gradient(90deg, var(--accent), transparent);
      border-radius: 2px;
    }
    .hero-tagline {
      font-family: var(--ff-mono);
      font-size: clamp(.9rem, 2vw, 1.1rem);
      color: var(--text-muted);
      margin-bottom: 2.4rem;
      min-height: 2em;
    }
	@media (max-width: 576.98px) {
		.hero-tagline {
		  margin-bottom: 1.4rem;
		}
	}
    .cursor-blink {
      display: inline-block;
      width: 2px; height: 1.1em;
      background: var(--accent);
      vertical-align: middle;
      margin-left: 2px;
      animation: blink 1s step-end infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }

    .hero-desc {
      color: var(--text-muted);
      max-width: 520px;
      margin-bottom: 2.8rem;
      font-size: 1rem;
    }
	@media (max-width: 576.98px) {
		  .hero-desc{
		  margin-bottom: 1.8rem;
		}
	}
    .btn-primary-glow {
      font-family: var(--ff-display);
      font-weight: 600;
      font-size: .92rem;
      background: var(--accent);
      color: #fff;
      border: none;
      padding: .78rem 2rem;
      border-radius: 4px;
      text-decoration: none;
      transition: box-shadow .25s, transform .2s;
      letter-spacing: .04em;
      display: inline-block;
    }
	@media (max-width: 576.98px) {
		.btn-primary-glow{
			font-size: .82rem;
			padding: .78rem 0.8rem;
		}
	}
    .btn-primary-glow:hover {
      box-shadow: 0 0 32px var(--accent-glow);
      transform: translateY(-2px);
      color: #fff;
    }
    .btn-outline-ghost {
      font-family: var(--ff-display);
      font-weight: 500;
      font-size: .92rem;
      background: transparent;
      color: rgb(29 111 254);
      border:1px solid rgb(29 111 254);
      padding: .78rem 2rem;
      border-radius: 4px;
      text-decoration: none;
      transition: border-color .2s, color .2s;
      letter-spacing: .04em;
      display: inline-block;
    }
	@media (max-width: 576.98px) {
		.btn-outline-ghost {
			font-size: .82rem;
			padding: .78rem 0.8rem;
		}
	}
    .btn-outline-ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .hero-stats {
      margin-top: 3.5rem;
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
    }
	@media (max-width: 576.98px) {
		 .hero-stats{
			 margin-top:2.8rem;
		  margin-bottom: 0.2rem;
		}
	}
    .stat-item { position: relative; }
    .stat-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -1.5rem;
      top: 8px;
      width: 1px; height: 40px;
      background: var(--border);
    }
    .stat-item .stat-num {
      font-family: var(--ff-display);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1;
    }
    .stat-item .stat-label {
      font-size: .78rem;
      color: var(--text-muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-top: .3rem;
    }

    /* code card */
    .hero-code-card {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.6rem 1.8rem 1.4rem;
      font-family: var(--ff-mono);
      font-size: .8rem;
      line-height: 2;
      position: relative;
      box-shadow: 0 0 60px rgba(30,111,255,.07), 0 24px 64px rgba(0,0,0,.35);
    }
	@media(max-width:576px){
		.hero-code-card {
			  line-height: 1.3;
		}
	}
    .hero-code-card::before {
      content: '● ● ●';
      position: absolute;
      top: .85rem; left: 1.2rem;
      font-size: .68rem;
      letter-spacing: .4em;
      color: var(--text-muted);
    }
    .hero-code-card .code-ln { padding-top: .4rem; display: block; }
    .c-comment { color: #4a6a8a; }
    .c-key     { color: var(--accent-light); }
    .c-str     { color: #64B5F6; }
    .c-val     { color: #FFB74D; }
    .c-fn      { color: #81C784; }

    /* =========================================
       SECTION COMMON
    ========================================= */
    section { padding: 6rem 0; }
    .sec-label {
      font-family: var(--ff-mono);
      font-size: .78rem;
      color: var(--accent);
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
    .sec-title {
      font-family: var(--ff-display);
      font-size: clamp(1.9rem, 4vw, 2.75rem);
      font-weight: 700;
      letter-spacing: -.02em;
      margin-bottom: .8rem;
    }
	@media(max-width:992px){
		.sec-title {
			font-size: clamp(1.5rem, 4vw, 2.75rem);
		}
	}
    .sec-divider {
      width: 44px; height: 3px;
      background: linear-gradient(90deg, var(--accent), transparent);
      border-radius: 2px;
      margin-bottom: 3.5rem;
    }
@media(max-width:576px){
		 .sec-divider {
		 margin-bottom: 1.8rem;
		}
	}
    /* =========================================
       ABOUT
    ========================================= */
    #about { background: var(--bg-card2); }
    .about-avatar-placeholder {
      width: 100%;
      max-width: 500px;
      aspect-ratio: 1;
      border-radius: 18px;
      background: var(--bg-card);
      border: 2px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      color: var(--text-muted);
      font-family: var(--ff-mono);
      font-size: .82rem;
    }
	.about-avatar-placeholder img{max-width:100%}
    .about-avatar-placeholder i { font-size: 3.6rem; color: var(--accent); opacity: .45; }
    .about-img-wrap {
      position: relative;
      display: inline-block;
    }
    .about-img-wrap::after {
      content: '';
      position: absolute;
      inset: -10px -10px 10px 10px;
      border: 2px solid var(--accent);
      border-radius: 18px;
      opacity: .22;
      pointer-events: none;
    }
    .about-text p { color: var(--text-muted); margin-bottom: 1rem; }
    .tech-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      background: var(--accent-dim);
      border: 1px solid var(--border);
      color: var(--accent);
      font-family: var(--ff-mono);
      font-size: .75rem;
      padding: .28rem .75rem;
      border-radius: 100px;
      margin: .22rem;
      transition: box-shadow .2s, background .2s;
    }
    .tech-chip:hover { box-shadow: 0 0 10px var(--accent-glow); background: rgba(30,111,255,.2); }
    .tech-chip.blue-light {
      background: rgba(91,155,255,.1);
      border-color: rgba(91,155,255,.25);
      color: var(--accent-light);
    }

    /* =========================================
       SKILLS
    ========================================= */
    #skills { background: var(--bg-primary); }
    .skill-category {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 14px;
      padding: 1.8rem;
      height: 100%;
      transition: border-color .3s, transform .3s, box-shadow .3s;
    }
    .skill-category:hover {
      border-color: var(--border);
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(30,111,255,.08);
    }
    .skill-cat-icon {
      width: 46px; height: 46px;
      border-radius: 10px;
      background: var(--accent-dim);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      color: var(--accent);
      margin-bottom: 1.2rem;
    }
    .skill-cat-icon.v2 { background: rgba(91,155,255,.12); color: var(--accent-light); }
    .skill-cat-icon.v3 { background: rgba(52,211,153,.1);  color: #34d399; }
    .skill-cat-icon.v4 { background: rgba(245,158,11,.1);  color: #f59e0b; }
    .skill-cat-title {
      font-family: var(--ff-display);
      font-weight: 600;
      font-size: .95rem;
      margin-bottom: 1rem;
    }
    .skill-bar-item { margin-bottom: .85rem; }
    .skill-bar-item .skill-name {
      font-family: var(--ff-mono);
      font-size: .75rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      margin-bottom: .32rem;
    }
    .skill-bar-item .skill-name span { color: var(--accent); }
    .skill-bar-track {
      height: 4px;
      background: var(--border-soft);
      border-radius: 2px;
      overflow: hidden;
    }
    .skill-bar-fill {
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .9s cubic-bezier(.22,1,.36,1);
    }
    .skill-bar-fill.animate { transform: scaleX(1); }

    /* =========================================
       PARTNERS (logos)
    ========================================= */
    #partners { background: var(--bg-card2); }
    .partners-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 2rem 3.5rem;
      padding: 1rem 0;
    }
    .partner-logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .85;
      transition: opacity .25s, transform .25s;
	  padding:10px;
    }
	.swiper-slide .partner-logo-item{
		background: transparent;
		border: 0;
		border-radius: 10px;
		display: block;
		font-size: 24px;
		font-weight: bold;
		transition: transform .25s ease, box-shadow .25s ease;
	}
	.swiper-slide .partner-logo-item>img{
		top: 50%;
		left: 50%;
		display: inline-block;
		transform: translate(-50%, -50%) scale(1);
		transition: transform .25s ease, box-shadow .25s ease;
		cursor:pointer;
		padding: 0;
		max-width: 80%;
		max-height: 80%;
	}
	.swiper-slide .partner-logo-item.image-full:after {
		content: "";
		display: block;
		position: relative;
		z-index: 2;
		padding-top: 65px;
	}
	@media(max-width:576px){
		.swiper-slide .partner-logo-item.image-full:after{
			padding-top: 35px;
		}
	}
    .swiper-slide:hover .partner-logo-item img{
      opacity: 1;
      transform:  translate(-50%, -50%) scale(1.05);
    }
    /* For dark logos on light bg, invert in dark mode */
    [data-theme="dark"] .partner-invert { filter: grayscale(1) invert(1); }
    [data-theme="dark"] .partner-invert:hover { filter: grayscale(0) invert(1); }

    /* =========================================
       PROJECTS
    ========================================= */
    #projects { background: var(--bg-primary); }
    .projects-swiper-wrap { position: relative; padding: 0 0 3.5rem; }
    .swiper-projects { overflow: visible !important; padding-bottom: .5rem !important; }
    .swiper-projects-clip {
      overflow: hidden;
      margin: 0 -1rem;
      padding: 0 1rem 1rem;
    }
    .project-card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: border-color .3s, transform .3s, box-shadow .3s;
    }
    .project-card:hover {
      border-color: var(--border);
      transform: translateY(-6px);
      box-shadow: 0 28px 64px rgba(0,0,0,.25), 0 0 32px rgba(30,111,255,.08);
    }
    .project-thumb {
      height: 155px;
      background: var(--bg-card2);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid var(--border-soft);
      position: relative;
      overflow: hidden;
    }
    .project-thumb::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .18;
      transition: opacity .35s;
    }
    .project-thumb.c-blue::before   { background: radial-gradient(circle at 50% 65%, var(--accent), transparent 68%); }
    .project-thumb.c-sky::before    { background: radial-gradient(circle at 50% 65%, #38bdf8, transparent 68%); }
    .project-thumb.c-green::before  { background: radial-gradient(circle at 50% 65%, #34d399, transparent 68%); }
    .project-thumb.c-amber::before  { background: radial-gradient(circle at 50% 65%, #f59e0b, transparent 68%); }
    .project-thumb.c-rose::before   { background: radial-gradient(circle at 50% 65%, #f43f5e, transparent 68%); }
    .project-thumb.c-indigo::before { background: radial-gradient(circle at 50% 65%, #6366f1, transparent 68%); }
    .project-card:hover .project-thumb::before { opacity: .38; }
    .project-thumb-icon {
      position: relative; z-index: 1;
      font-size: 3.4rem; line-height: 1;
      transition: transform .35s cubic-bezier(.22,1,.36,1);
    }
    .project-thumb.c-blue   .project-thumb-icon { color: var(--accent); }
    .project-thumb.c-sky    .project-thumb-icon { color: #38bdf8; }
    .project-thumb.c-green  .project-thumb-icon { color: #34d399; }
    .project-thumb.c-amber  .project-thumb-icon { color: #f59e0b; }
    .project-thumb.c-rose   .project-thumb-icon { color: #fb7185; }
    .project-thumb.c-indigo .project-thumb-icon { color: #818cf8; }
    .project-card:hover .project-thumb-icon { transform: scale(1.14) translateY(-3px); }
    .project-body { padding: 1.45rem; flex: 1; display: flex; flex-direction: column; }
    .project-tags { margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .3rem; }
    .tag {
      font-family: var(--ff-mono);
      font-size: .68rem;
      padding: .16rem .55rem;
      border-radius: 4px;
      background: var(--border-soft);
      color: var(--text-muted);
      border: 1px solid var(--border-soft);
    }
    .tag.blue   { background: var(--accent-dim); color: var(--accent); border-color: var(--border); }
    .tag.sky    { background: rgba(56,189,248,.1); color: #38bdf8; border-color: rgba(56,189,248,.2); }
    .tag.green  { background: rgba(52,211,153,.1); color: #34d399; border-color: rgba(52,211,153,.2); }
    .tag.amber  { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.2); }
    .project-title {
      font-family: var(--ff-display);
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: .42rem;
    }
    .project-desc { font-size: .865rem; color: var(--text-muted); flex: 1; margin-bottom: 1.1rem; line-height: 1.62; }
    .project-links { display: flex; gap: .75rem; margin-top: auto; }
    .proj-link {
      font-family: var(--ff-mono);
      font-size: .74rem;
      color: var(--text-muted);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: .28rem;
      transition: color .2s;
    }
    .proj-link:hover { color: var(--accent); }
    .featured-badge {
      font-family: var(--ff-mono);
      font-size: .66rem;
      background: var(--accent);
      color: #fff;
      padding: .16rem .6rem;
      border-radius: 100px;
      letter-spacing: .08em;
    }

    /* swiper nav */
    .swiper-nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2.2rem; }
    .swiper-nav-btns { display: flex; gap: .55rem; }
    .swiper-btn-prev, .swiper-btn-next {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      font-size: .95rem;
      cursor: pointer;
      transition: border-color .2s, color .2s, box-shadow .2s;
    }
    .swiper-btn-prev:hover, .swiper-btn-next:hover {
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 12px var(--accent-glow);
    }
    .swiper-btn-prev.swiper-button-disabled,
    .swiper-btn-next.swiper-button-disabled { opacity: .3; pointer-events: none; }
    .swiper-projects .swiper-pagination { bottom: 0 !important; }
    .swiper-projects .swiper-pagination-bullet {
      width: 6px; height: 6px;
      background: var(--text-muted);
      opacity: .4;
      border-radius: 3px;
      transition: width .3s, background .2s, opacity .2s;
    }
    .swiper-projects .swiper-pagination-bullet-active {
      width: 20px; background: var(--accent); opacity: 1;
    }
    .slide-counter { font-family: var(--ff-mono); font-size: .78rem; color: var(--text-muted); }
    .slide-counter .cur { color: var(--accent); font-weight: 500; }

    /* =========================================
       PROCESS
    ========================================= */
    #process { background: var(--bg-card2); }
    .process-step {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      margin-bottom: 2.4rem;
      position: relative;
    }
    .process-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 23px; top: 50px;
      width: 2px;
      height: calc(100% - 18px);
      background: linear-gradient(180deg, var(--accent), transparent);
      opacity: .2;
    }
    .step-num {
      flex-shrink: 0;
      width: 46px; height: 46px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-mono);
      font-size: .82rem;
      color: var(--accent);
      background: var(--bg-card);
    }
    .step-content h5 { font-family: var(--ff-display); font-weight: 600; font-size: .97rem; margin-bottom: .38rem; }
    .step-content p  { color: var(--text-muted); font-size: .88rem; margin: 0; }

    /* =========================================
       CONTACT
    ========================================= */
    #contact { background: var(--bg-primary); }
    .contact-card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 16px;
      padding: 2.8rem;
    }
    .contact-form .form-control,
    .contact-form .form-select {
      background: var(--bg-card2);
      border: 1px solid var(--border-soft);
      color: var(--text-main);
      border-radius: 8px;
      padding: .72rem 1rem;
      font-size: .92rem;
      transition: border-color .2s, box-shadow .2s;
	  font-size:16px !important;
    }
    .contact-form .form-control:focus,
    .contact-form .form-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      background: var(--bg-card2);
      color: var(--text-main);
    }
    .contact-form .form-label {
      font-family: var(--ff-mono);
      font-size: .75rem;
      color: var(--text-muted);
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: .38rem;
    }
    .contact-form textarea { min-height: 125px; resize: vertical; }
    .contact-info-item { display: flex; align-items: center; gap: .95rem; margin-bottom: 1.45rem; }
    .contact-info-icon {
      width: 42px; height: 42px;
      border-radius: 10px;
      background: var(--accent-dim);
      display: flex; align-items: center; justify-content: center;
      color: var(--accent); flex-shrink: 0;
    }
    .contact-info-text .label { font-family: var(--ff-mono); font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
    .contact-info-text .value { font-family: var(--ff-display); font-size: .92rem; color: var(--text-main); }
    .social-links { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 2rem; }
    .social-btn {
      width: 42px; height: 42px;
      border-radius: 10px;
      background: var(--bg-card2);
      border: 1px solid var(--border-soft);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 1.05rem;
      transition: border-color .2s, color .2s, box-shadow .2s;
    }
    .social-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
    .send-btn {
      background: var(--accent);
      color: #fff;
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: .92rem;
      border: none;
      padding: .82rem 2.5rem;
      border-radius: 8px;
      letter-spacing: .04em;
      transition: box-shadow .25s, transform .2s;
      cursor: pointer;
      width: 100%;
    }
    .send-btn:hover { box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); }

    /* =========================================
       FOOTER
    ========================================= */
    footer {
      background: var(--bg-card2);
      border-top: 1px solid var(--border-soft);
      padding: 2rem 0;
      text-align: center;
    }
    footer p { color: var(--text-muted); font-size: .82rem; margin: 0; }
    footer span { color: var(--accent); font-family: var(--ff-mono); }

    /* =========================================
       SCROLL REVEAL
    ========================================= */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* =========================================
       RESPONSIVE
    ========================================= */
    @media (max-width: 767.98px) {
      section { padding: 3.5rem 0; }
      .hero-stats { gap: 1.2rem; }
      .contact-card { padding: 1.6rem 1.1rem; }
      .nav-links { display: none; }
      .stat-item:not(:last-child)::after { display: none; }
    }

/* FADE */

.fade{

    position:absolute;

    top:0;

    width:10vw;
    height:100%;

    z-index:20;

    pointer-events:none;

}

/* LEFT */

.fade-left{

    left:0;

    background:
        linear-gradient(
            to right,
            #0d1c32,
            transparent
        );

}

/* RIGHT */

.fade-right{

    right:0;

    background:
        linear-gradient(
            to left,
            #0d1c32,
            transparent
        );

}

/* TRACK */

/* MOBILE */
button#mobileMenuBtn {
    width: 50px;
    height: 40px;
}
.partner-logo-item img.brightness{
  filter: brightness(1);
}
.partner-logo-item img.brightness{
  filter: brightness(1);
}
.fade-show{
opacity:1 !important;
}

input::placeholder,textarea::placeholder{
    color: var(--text-muted) !important;
    font-size: 14px;
    font-style: italic;
    opacity: 1; /* Firefox */
}

/**************Image Full**********/
.image-full {
    position: relative;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    overflow: hidden;
    display: block;
}

.image-full:after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    padding-top: 100%;
}

.image-full>img {
    z-index: 1;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.image-full-cover>img{
    -o-object-fit: cover;
    object-fit: cover;
}

.video-full {
    position: relative;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    overflow: hidden;
    display: block;
}

.video-full:after {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    padding-top: 100%;
}
.video-full-popup:after {
    padding-top: 56.5%;
}
.video-full>video{
    z-index: 2;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.video-full-cover>video{
    -o-object-fit: cover;
    object-fit: cover;
}
.video-play-gallery{display:block; position:relative;height:100%;}
.video-play-gallery .playButton {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 10;
    border: 0;
    background: transparent;
}
/**************END Image Full**********/
.ts-control .item {
    background: transparent;
    color: #fff;
    font-size: initial;
    font-weight: initial;
    border: 0;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control{
    background:#1e293b;
    border:1px solid #334155;
    color:#fff;
}

.ts-control input{
    color:#fff !important;
}

.ts-dropdown{
    background:#1e293b;
    border:1px solid #334155;
}

.ts-dropdown .option{
    color:#fff;
}

.ts-dropdown .active{
    background:#2563eb;
    color:#fff;
}

.ts-dropdown .create{
    color:#cbd5e1;
}

.ts-wrapper.multi .item{
    background:#2563eb;
    color:#fff;
    border:none;
}

.ts-wrapper.focus .ts-control{
    border-color:#3b82f6;
    box-shadow:0 0 0 .25rem rgba(59,130,246,.25);
}