/* ===================================================================
   TECHSPACR — DARK ROYAL DESIGN SYSTEM
=================================================================== */
:root{
  --ts-void: #07091A;
  --ts-panel: #0D1130;
  --ts-panel-2: #12163A;
  --ts-blue: #3D6BFF;
  --ts-blue-soft: #6E8CFF;
  --ts-gold: #E8B54D;
  --ts-gold-soft: #F5D08A;
  --ts-green: #28C176;
  --ts-red: #EF4A5B;
  --ts-text: #F4F5FA;
  --ts-text-soft: #9098B5;
  --ts-border: rgba(255,255,255,0.09);
  --ts-glass: rgba(255,255,255,0.035);

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }

body{
  font-family: var(--font-body);
  color: var(--ts-text);
  background: var(--ts-void);
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
}

h1,h2,h3,h4,.ts-brand{
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

a{ text-decoration: none; }

::selection{ background: var(--ts-blue); color: #fff; }

:focus-visible{
  outline: 2px solid var(--ts-blue-soft);
  outline-offset: 3px;
}

/* custom scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--ts-void); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--ts-blue), var(--ts-panel-2));
  border-radius: 10px;
  border: 2px solid var(--ts-void);
}

.section-pad{ padding: 7rem 0; position: relative; }

/* grain / noise texture over everything */
.ts-noise{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  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");
}

/* cursor spotlight */
.ts-spotlight{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--x, 50%) var(--y, 30%), rgba(61,107,255,0.10), transparent 60%);
  transition: background .1s ease;
}

.ts-eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ts-blue-soft);
  margin-bottom: 1.1rem;
  align-items: center;
  gap: 0.5rem;
}
.eyebrow-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ts-gold);
  box-shadow: 0 0 10px 2px var(--ts-gold);
  display: inline-block;
}

.grad-text{
  background: linear-gradient(100deg, var(--ts-blue-soft), var(--ts-gold-soft) 60%, var(--ts-blue-soft));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}

/* Buttons */
.ts-btn-primary{
  background: linear-gradient(135deg, var(--ts-blue), #2748C4);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.85rem 1.9rem;
  border-radius: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px -10px rgba(61,107,255,0.6);
}
.ts-btn-primary:hover{
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(61,107,255,0.75);
}

.ts-btn-gold{
  background: linear-gradient(135deg, var(--ts-gold-soft), var(--ts-gold));
  color: #1A1400;
  border: none;
  font-weight: 700;
  padding: 0.85rem 1.9rem;
  border-radius: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px -10px rgba(232,181,77,0.55);
}
.ts-btn-gold:hover{
  color: #1A1400;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(232,181,77,0.7);
}

.ts-btn-outline{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--ts-border);
  color: var(--ts-text);
  font-weight: 600;
  padding: 0.8rem 1.9rem;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  transition: all .25s ease;
}
.ts-btn-outline:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateY(-3px);
}

.ts-btn-outline-light{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 600;
  padding: 0.8rem 1.9rem;
  border-radius: 10px;
  transition: all .25s ease;
}
.ts-btn-outline-light:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-3px);
}

/* Glass card base + glow-on-cursor */
.glass-card{
  position: relative;
  background: var(--ts-glass);
  border: 1px solid var(--ts-border);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.glass-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(61,107,255,0.16), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.glass-card:hover::before{ opacity: 1; }

/* Magnetic button wrapper handled in JS via transform */
.ts-magnetic{ will-change: transform; }

/* ===================================================================
   NAVBAR
=================================================================== */
.ts-navbar{
  background: rgba(7,9,26,0.55);
  backdrop-filter: blur(16px);
  padding: 1rem 0;
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
.ts-navbar.scrolled{
  background: rgba(7,9,26,0.85);
  border-bottom: 1px solid var(--ts-border);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.6);
}

.ts-brand{
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ts-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ts-logo-grid{
  display: inline-grid;
  grid-template-columns: 8px 8px;
  grid-template-rows: 8px 8px;
  gap: 2px;
  width: 18px;
  height: 18px;
}
.ts-logo-grid .block{ border-radius: 2px; }
.b-green{ background: var(--ts-green); }
.b-gold{ background: var(--ts-gold); }
.b-red{ background: var(--ts-red); }
.b-blue{ background: var(--ts-blue); }

.ts-nav-tabs{ gap: 0.3rem; }
.ts-nav-tabs .nav-link{
  color: var(--ts-text-soft);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all .2s ease;
  position: relative;
}
.ts-nav-tabs .nav-link:hover{ color: #fff; background: rgba(255,255,255,0.05); }
.ts-nav-tabs .nav-link.active{ color: #fff; }
.ts-nav-tabs .nav-link.active::after{
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--ts-blue), var(--ts-gold));
  border-radius: 2px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
border: none;
}

/* ===================================================================
   HERO
=================================================================== */
.ts-hero{
  position: relative;
  min-height: 100vh; /* fallback for browsers without dvh support */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
  background: var(--ts-void);
}

.ts-fluid-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.ts-fluid-veil{
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

.ts-mesh{
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(61,107,255,0.28), transparent 60%),
    radial-gradient(500px 400px at 80% 30%, rgba(232,181,77,0.14), transparent 60%),
    radial-gradient(700px 500px at 50% 90%, rgba(40,193,118,0.10), transparent 60%);
  filter: blur(40px);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-3%, 2%) scale(1.08); }
}

.ts-hero-grid-lines{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
}

.ts-hero-blocks{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hblock{
  position: absolute;
  border-radius: 20px;
  opacity: 0.85;
  filter: blur(0.3px);
  animation: floatBlock 8s ease-in-out infinite;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}
.hb-green{ width: 86px; height: 86px; background: linear-gradient(145deg, var(--ts-green), #0F7A46); top: 16%; left: 8%; animation-delay: 0s; }
.hb-gold{ width: 58px; height: 58px; background: linear-gradient(145deg, var(--ts-gold-soft), var(--ts-gold)); top: 68%; left: 14%; animation-delay: 1.4s; }
.hb-red{ width: 66px; height: 66px; background: linear-gradient(145deg, var(--ts-red), #8C1622); top: 22%; right: 10%; animation-delay: 2.6s; }
.hb-blue{ width: 104px; height: 104px; background: linear-gradient(145deg, var(--ts-blue-soft), var(--ts-blue)); top: 62%; right: 8%; animation-delay: 3.8s; }

@keyframes floatBlock{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-26px) rotate(6deg); }
}
@media (max-width: 991px){ .ts-hero-blocks{ opacity: 0.4; } }

.ts-hero-content{ position: relative; z-index: 2; }

.ts-hero-title{
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.4rem;
}

.ts-hero-sub{
  font-size: 1.2rem;
  color: var(--ts-text-soft);
  max-width: 620px;
  margin-bottom: 1.1rem;
}

.ts-hero-tagline{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ts-gold-soft);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-sep{ color: var(--ts-text-soft); margin: 0 0.3rem; }

.ts-scroll-cue{
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  z-index: 2;
}
.ts-scroll-cue span{
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  background: var(--ts-gold);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollCue 1.8s ease infinite;
}
@keyframes scrollCue{
  0%{ opacity: 1; top: 6px; }
  100%{ opacity: 0; top: 20px; }
}

/* ===================================================================
   MARQUEE
=================================================================== */
.ts-marquee{
  background: var(--ts-panel);
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  overflow: hidden;
  padding: 1.1rem 0;
}
.ts-marquee-track{
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: marqueeScroll 26s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ts-text-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ts-marquee-track .dot{ color: var(--ts-gold); font-size: 0.5rem; align-self: center; }
@keyframes marqueeScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ===================================================================
   ABOUT
=================================================================== */
.ts-h2{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  margin-bottom: 1.3rem;
  color: var(--ts-text);
}

.ts-lead-text{
  color: var(--ts-text-soft);
  font-size: 1.05rem;
  max-width: 560px;
}
.ts-mission{ color: var(--ts-text); font-weight: 600; }

.ts-inline-link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ts-gold-soft);
  border-bottom: 1px solid transparent;
  transition: all .2s ease;
}
.ts-inline-link i{ transition: transform .2s ease; }
.ts-inline-link:hover{ color: var(--ts-gold); border-bottom-color: var(--ts-gold); }
.ts-inline-link:hover i{ transform: translateX(4px); }

.ts-tilt-card{
  position: relative;
  perspective: 1000px;
}
.ts-about-visual{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 1/1;
  max-width: 420px;
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}
.av-block{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 25px 60px -20px rgba(0,0,0,0.6);
  background-size: cover;
  background-position: center;
}
/* Each block's gradient is a real, pre-rendered .png raster file
   (av-1.png..av-4.png) — not a CSS gradient, not a data: URI, and not
   an SVG. The custom WebGL ripple effect (av-ripple.js) loads this as
   its refraction texture; SVG sources turned out to be unreliable as
   WebGL texture inputs (rendered solid black on some setups), so
   these are plain rasterized PNGs instead — the safest, most
   universally-supported source type for gl.texImage2D(). */
.av-1{ background-image: url("av-1.png"); }
.av-2{ background-image: url("av-2.png"); }
.av-3{ background-image: url("av-3.png"); }
.av-4{ background-image: url("av-4.png"); }
.tilt-glow{
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(61,107,255,0.18), transparent 65%);
  z-index: -1;
  filter: blur(10px);
}

.ts-stat{ display: flex; flex-direction: column; border-left: 2px solid var(--ts-border); padding-left: 0.9rem; }
.stat-num{ font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; line-height: 1; }
.stat-label{ font-size: 0.82rem; color: var(--ts-text-soft); margin-top: 0.4rem; }

/* ===================================================================
   SERVICES — BENTO GRID
=================================================================== */
.ts-bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 1.5rem;
}
.bento-card{
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, border-color .3s ease;
}
.bento-card:hover{ transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.bc-large{ grid-column: span 2; }
@media (max-width: 991px){
  .ts-bento{ grid-template-columns: 1fr; }
  .bc-large{ grid-column: span 1; }
}

.bc-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.3rem;
}
.bc-index{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ts-text-soft);
}
.bento-card h3{
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  color: var(--ts-text);
}
.bento-card p{
  font-size: 0.94rem;
  color: var(--ts-text-soft);
  margin-bottom: 0;
}
.bc-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.bc-tags span{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ts-border);
  color: var(--ts-text-soft);
}

.sc-icon{
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.ic-green{ background: linear-gradient(145deg, var(--ts-green), #0F7A46); }
.ic-gold{ background: linear-gradient(145deg, var(--ts-gold-soft), var(--ts-gold)); color: #1A1400; }
.ic-red{ background: linear-gradient(145deg, var(--ts-red), #8C1622); }
.ic-blue{ background: linear-gradient(145deg, var(--ts-blue-soft), var(--ts-blue)); }

/* ===================================================================
   CAPABILITIES
=================================================================== */
.ts-cap-item{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: 0.95rem;
  height: 100%;
  color: var(--ts-text);
  transition: transform .25s ease;
}
.ts-cap-item:hover{ transform: translateX(4px); }
.ts-cap-item i{ color: var(--ts-green); font-size: 1.1rem; flex-shrink: 0; }

/* ===================================================================
   FEATURED SOLUTIONS
=================================================================== */
.ts-solution-row{
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem;
  margin-bottom: 1.25rem;
  transition: transform .3s ease, border-color .3s ease;
}
.ts-solution-row:hover{ transform: translateX(6px); border-color: rgba(255,255,255,0.18); }

.ts-solution-tag{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  min-width: 66px; height: 66px; width: 66px;
  color: #fff;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tag-blue{ background: linear-gradient(145deg, var(--ts-blue-soft), var(--ts-blue)); }
.tag-green{ background: linear-gradient(145deg, var(--ts-green), #0F7A46); }
.tag-red{ background: linear-gradient(145deg, var(--ts-red), #8C1622); }
.tag-gold{ background: linear-gradient(145deg, var(--ts-gold-soft), var(--ts-gold)); color: #1A1400; }

.ts-solution-body h3{ font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ts-text); }
.ts-solution-body p{ color: var(--ts-text-soft); margin-bottom: 0.9rem; max-width: 560px; }
.ts-check-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ts-check-list li{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ts-border);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ts-text);
}
.ts-check-list li::before{ content: "✓ "; color: var(--ts-green); font-weight: 700; }

/* ===================================================================
   WHY CHOOSE US
=================================================================== */
.ts-why-item{
  padding: 1.9rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: transform .3s ease, border-color .3s ease;
}
.ts-why-item:hover{ transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.ts-why-item i{ font-size: 1.7rem; color: var(--ts-blue-soft); flex-shrink: 0; }
.ts-why-item h4{ font-size: 1rem; font-weight: 700; margin: 0; color: var(--ts-text); }
.ts-why-highlight{
  background: linear-gradient(135deg, var(--ts-blue), #2748C4);
  border-radius: 18px;
  border: 1px solid transparent;
}
.ts-why-highlight i, .ts-why-highlight h4{ color: #fff; }

/* ===================================================================
   CTA BANNER
=================================================================== */
.ts-cta{
  position: relative;
  background: var(--ts-panel);
  padding: 6rem 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
}
.ts-cta-mesh{
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(500px 400px at 25% 30%, rgba(61,107,255,0.22), transparent 60%),
    radial-gradient(500px 400px at 75% 60%, rgba(232,181,77,0.16), transparent 60%);
  filter: blur(50px);
  animation: meshDrift 20s ease-in-out infinite alternate;
}
.ts-cta h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 1rem;
  position: relative;
}
.ts-cta-sub{
  color: var(--ts-text-soft);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

/* ===================================================================
   TESTIMONIALS
=================================================================== */
.ts-testimonial-card{
  padding: 2.3rem;
  height: 100%;
}
.ts-testimonial-card i.bi-quote{ font-size: 2rem; color: var(--ts-gold); }
.ts-testimonial-card p{
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ts-text);
  margin: 1rem 0 1.6rem;
}
.tc-author{ display: flex; align-items: center; gap: 0.85rem; }
.tc-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tc-author div{ display: flex; flex-direction: column; font-size: 0.85rem; }
.tc-author strong{ font-size: 0.95rem; color: var(--ts-text); }
.tc-author span{ color: var(--ts-text-soft); }

/* ===================================================================
   CONTACT
=================================================================== */
.ts-contact-info{ display: flex; flex-direction: column; gap: 1rem; }
.ci-row{ display: flex; align-items: center; gap: 0.8rem; font-weight: 600; font-size: 1rem; color: var(--ts-text); }
.ci-row i{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--ts-blue-soft), var(--ts-blue));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ts-contact-form{ padding: 2.4rem; }

.ts-float-field{ position: relative; }
.ts-float-field .form-control{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  padding: 1.1rem 1rem 0.5rem;
  font-size: 0.95rem;
  color: var(--ts-text);
  height: auto;
}
.ts-float-field textarea.form-control{ padding-top: 1.3rem; }
.ts-float-field .form-control:focus{
  background: rgba(255,255,255,0.05);
  border-color: var(--ts-blue-soft);
  box-shadow: 0 0 0 3px rgba(61,107,255,0.15);
  color: var(--ts-text);
}
.ts-float-field label{
  position: absolute;
  top: 0.85rem; left: 1rem;
  font-size: 0.92rem;
  color: var(--ts-text-soft);
  pointer-events: none;
  transition: all .18s ease;
}
.ts-float-field .form-control:focus + label,
.ts-float-field .form-control:not(:placeholder-shown) + label{
  top: 0.35rem;
  font-size: 0.68rem;
  color: var(--ts-blue-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===================================================================
   FOOTER
=================================================================== */
.ts-footer{
  background: var(--ts-panel);
  color: var(--ts-text-soft);
  padding: 3rem 0;
  border-top: 1px solid var(--ts-border);
}
.ts-brand-footer{ color: #fff; font-size: 1.3rem; }
.ts-footer-socials{ display: flex; gap: 0.7rem; justify-content: flex-start; }
@media (min-width: 768px){ .ts-footer-socials{ justify-content: flex-end; } }
.ts-footer-socials a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ts-border);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.ts-footer-socials a:hover{
  background: linear-gradient(135deg, var(--ts-blue), var(--ts-gold));
  border-color: transparent;
  transform: translateY(-3px);
}

/* ===================================================================
   SECTION BACKGROUND LAYERING
=================================================================== */
.ts-services, .ts-why, .ts-contact{ background: var(--ts-panel); }
.ts-about, .ts-capabilities, .ts-solutions, .ts-testimonials{ background: var(--ts-void); }

/* ===================================================================
   ACCESSIBILITY — REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===================================================================
   ABOUT PAGE — HERO
=================================================================== */
.ts-page-hero{
  position: relative;
  padding: 10rem 0 5rem;
  overflow: hidden;
  background: var(--ts-void);
}
.ts-page-title{
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.4rem;
}

/* ===================================================================
   OUR STORY / TIMELINE PANEL
=================================================================== */
.ts-story{ background: var(--ts-void); }
.ts-story-panel{ padding: 2.2rem; }
.story-row{
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--ts-border);
}
.story-row:last-child{ border-bottom: none; }
.story-year{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ts-gold-soft);
  min-width: 64px;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.story-text{ color: var(--ts-text-soft); font-size: 0.95rem; }

/* ===================================================================
   MISSION & VISION
=================================================================== */
.ts-mv{ background: var(--ts-panel); }
.ts-mv-card{
  padding: 2.4rem;
  height: 100%;
}
.ts-mv-card h3{ font-size: 1.3rem; font-weight: 700; margin: 1.2rem 0 0.7rem; color: var(--ts-text); }
.ts-mv-card p{ color: var(--ts-text-soft); font-size: 0.97rem; margin-bottom: 0; }

/* ===================================================================
   CORE VALUES
=================================================================== */
.ts-values{ background: var(--ts-void); }
.ts-value-card{
  padding: 1.9rem;
  height: 100%;
  text-align: left;
  transition: transform .3s ease, border-color .3s ease;
}
.ts-value-card:hover{ transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.ts-value-card h4{ font-size: 1.05rem; font-weight: 700; margin: 1.1rem 0 0.6rem; color: var(--ts-text); }
.ts-value-card p{ font-size: 0.9rem; color: var(--ts-text-soft); margin-bottom: 0; }

.ts-process{ background: var(--ts-panel); }

/* ===================================================================
   CONTACT MODAL
=================================================================== */
.ts-contact-info-inline{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}
.ts-contact-info-inline span{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ts-text-soft);
}
.ts-contact-info-inline i{ color: var(--ts-blue-soft); }

.ts-modal .modal-dialog{ max-width: 720px; }
.ts-modal .modal-content{
  background: var(--ts-panel-2);
  border: 1px solid var(--ts-border);
  border-radius: 22px;
  backdrop-filter: blur(24px);
  padding: 0.5rem;
}
.ts-modal .modal-body{ padding: 2.2rem; }
.ts-modal-title{
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--ts-text);
}
.ts-modal-close{
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  z-index: 2;
  opacity: 0.7;
  transition: opacity .2s ease;
}
.ts-modal-close:hover{ opacity: 1; }

.modal-backdrop.show{
  opacity: 0.75;
  background: #050614;
}

.ts-modal.fade .modal-dialog{
  transform: translateY(20px) scale(0.98);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.ts-modal.show .modal-dialog{ transform: translateY(0) scale(1); }

/* ===================================================================
   SERVICES CHECKBOX GROUP (contact modal)
=================================================================== */
/* ===================================================================
MULTI-SELECT DROPDOWN (contact modal)
=================================================================== */
.ts-form-group-label{
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ts-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}
.ts-multiselect{ position: relative; }

.ts-multiselect-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  color: var(--ts-text-soft);
  font-size: 0.95rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.ts-multiselect-trigger:hover{ border-color: rgba(255,255,255,0.25); }
.ts-multiselect.is-open .ts-multiselect-trigger{
  background: rgba(255,255,255,0.05);
  border-color: var(--ts-blue-soft);
  box-shadow: 0 0 0 3px rgba(61,107,255,0.15);
}
.ts-multiselect-summary.has-value{ color: var(--ts-text); }
.ts-select-arrow{
  color: var(--ts-text-soft);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 0.75rem;
}
.ts-multiselect.is-open .ts-select-arrow{ transform: rotate(180deg); }

.ts-multiselect-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--ts-panel-2);
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.6);
  padding: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ts-multiselect.is-open .ts-multiselect-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ts-multiselect-option{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ts-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.ts-multiselect-option:hover{ background: rgba(255,255,255,0.05); color: var(--ts-text); }
.ts-multiselect-option input{
  accent-color: var(--ts-blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.ts-multiselect-option:has(input:checked){ color: var(--ts-text); }

/* ===================================================================
   SERVICES PAGE — DETAIL SECTIONS
=================================================================== */
.ts-service-detail{ background: var(--ts-void); }
.ts-service-alt{ background: var(--ts-panel); }

.ts-service-index{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ts-text-soft);
  display: block;
  margin-bottom: 0.6rem;
}

.ts-service-panel{ padding: 2.2rem; }
.panel-label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ts-gold-soft);
  margin-bottom: 0.9rem;
}
.panel-row{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ts-border);
  font-size: 0.94rem;
  color: var(--ts-text);
}
.panel-row:last-child{ border-bottom: none; }
.panel-row i{ color: var(--ts-green); flex-shrink: 0; }

.ts-solution-detail{ background: var(--ts-void); }
.ts-solution-note{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ts-gold-soft);
  margin-bottom: 0;
}
.ts-solution-note i{ flex-shrink: 0; }

.ts-why-detail{ background: var(--ts-void); }