/* =============================================
   GLITCH TECH — Main Stylesheet
   theglitchtech.com | Lalitpur, Kathmandu, Nepal
   ============================================= */

/* 1. Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* =============================================
   2. CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  /* Colors */
  --gt-black:      #000000;
  --gt-dark:       #0A0A0A;
  --gt-darker:     #080808;
  --gt-card:       #111111;
  --gt-card-2:     #161616;
  --gt-border:     #1E1E1E;
  --gt-border-2:   #2A2A2A;
  --gt-white:      #FFFFFF;
  --gt-off-white:  #F0F0F0;
  --gt-gray-400:   #888888;
  --gt-gray-600:   #555555;
  --gt-red:        #FF3B3B;
  --gt-cyan:       #00E5CC;
  --gt-red-muted:  rgba(255, 59, 59, 0.12);
  --gt-cyan-muted: rgba(0, 229, 204, 0.08);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 140px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm:  0 4px 12px rgba(0,0,0,0.3);
  --shadow-md:  0 12px 40px rgba(0,0,0,0.4);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.5);
  --shadow-red: 0 8px 32px rgba(255, 59, 59, 0.3);
  --shadow-cyan:0 8px 32px rgba(0, 229, 204, 0.2);

  /* Transitions */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-cubic:  0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* =============================================
   3. MODERN CSS RESET
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family:      var(--font-body);
  font-size:        16px;
  line-height:      1.7;
  color:            var(--gt-white);
  background-color: var(--gt-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

input, textarea, select, button {
  font-family: inherit;
  font-size:   inherit;
}

button {
  cursor:     pointer;
  background: none;
  border:     none;
}

/* =============================================
   4. SKIP LINK (ACCESSIBILITY)
   ============================================= */
.skip-link {
  position:   absolute;
  left:       -9999px;
  top:        auto;
  width:      1px;
  height:     1px;
  overflow:   hidden;
}
.skip-link:focus {
  position: fixed;
  top:      16px;
  left:     16px;
  width:    auto;
  height:   auto;
  padding:  12px 24px;
  background: var(--gt-red);
  color:      var(--gt-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 10000;
}

/* =============================================
   5. TYPOGRAPHY SCALE
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color:       var(--gt-white);
}

.gt-display {
  font-family:  var(--font-display);
  font-size:    clamp(60px, 8vw, 120px);
  font-weight:  800;
  line-height:  0.92;
  letter-spacing: -4px;
}

.gt-h1 {
  font-family:  var(--font-display);
  font-size:    clamp(40px, 5vw, 72px);
  font-weight:  700;
  letter-spacing: -2px;
}

.gt-h2 {
  font-family:  var(--font-display);
  font-size:    clamp(30px, 4vw, 52px);
  font-weight:  700;
  letter-spacing: -1.5px;
}

.gt-h3 {
  font-family:  var(--font-display);
  font-size:    clamp(22px, 3vw, 36px);
  font-weight:  600;
}

.gt-h4 {
  font-family: var(--font-display);
  font-size:   24px;
  font-weight: 600;
}

.gt-body-lg { font-size: 18px; line-height: 1.7; }
.gt-body    { font-size: 16px; line-height: 1.7; }
.gt-body-sm { font-size: 14px; line-height: 1.6; }

.gt-caption {
  font-family:     var(--font-mono);
  font-size:       12px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           var(--gt-gray-400);
}

/* =============================================
   6. LAYOUT
   ============================================= */
.gt-container {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 48px;
  width:     100%;
}

.gt-container-sm {
  max-width: 960px;
  margin:    0 auto;
  padding:   0 48px;
}

.gt-section {
  padding: 140px 0;
}

.gt-section-sm {
  padding: 80px 0;
}

.gt-grid-12 {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   24px;
}

/* =============================================
   7. BUTTONS
   ============================================= */
.gt-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-family:     var(--font-display);
  font-weight:     600;
  font-size:       14px;
  letter-spacing:  1px;
  text-transform:  uppercase;
  padding:         16px 36px;
  border-radius:   var(--radius-sm);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      all var(--transition-base);
  position:        relative;
  overflow:        hidden;
  white-space:     nowrap;
}

.gt-btn-primary {
  background: var(--gt-red);
  color:      var(--gt-white);
}

.gt-btn-primary:hover {
  background:  #ff5555;
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-red);
  color:       var(--gt-white);
}

.gt-btn-ghost {
  background: transparent;
  color:      var(--gt-white);
  border:     1px solid var(--gt-border-2);
}

.gt-btn-ghost:hover {
  border-color: var(--gt-white);
  background:   rgba(255, 255, 255, 0.05);
}

.gt-btn-glitch {
  background: transparent;
  color:      var(--gt-white);
  border:     1px solid var(--gt-cyan);
  position:   relative;
}

.gt-btn-glitch::before {
  content:    '';
  position:   absolute;
  inset:      -1px;
  background: linear-gradient(90deg, var(--gt-red), var(--gt-cyan));
  opacity:    0;
  transition: opacity var(--transition-base);
  z-index:    -1;
}

.gt-btn-glitch:hover {
  color: var(--gt-black);
}

.gt-btn-glitch:hover::before {
  opacity: 1;
}

.gt-btn-sm {
  padding:   10px 24px;
  font-size: 12px;
}

/* =============================================
   8. CARDS
   ============================================= */
.gt-card {
  background:  var(--gt-card);
  border:      1px solid var(--gt-border);
  border-radius: var(--radius-md);
  padding:     36px;
  transition:  all var(--transition-slow);
}

.gt-card:hover {
  border-color: var(--gt-border-2);
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-lg);
}

/* =============================================
   9. NAVIGATION
   ============================================= */
.gt-nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         1000;
  padding:         0 48px;
  height:          80px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  transition:      all var(--transition-slow);
}

.gt-nav.scrolled {
  background:      rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height:          64px;
  border-bottom:   1px solid var(--gt-border);
}

.gt-nav-logo img {
  height: 36px;
  width:  auto;
}

.gt-nav-logo-text {
  font-family:    var(--font-display);
  font-size:      28px;
  font-weight:    800;
  color:          var(--gt-white);
  letter-spacing: -1px;
}

.gt-nav-logo-text span {
  color: var(--gt-red);
}

.gt-nav-links {
  display:     flex;
  gap:         40px;
  list-style:  none;
  align-items: center;
}

.gt-nav-links a {
  font-family:    var(--font-display);
  font-size:      13px;
  font-weight:    600;
  color:          var(--gt-gray-400);
  text-decoration:none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:     color var(--transition-base);
  position:       relative;
}

.gt-nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gt-cyan);
  transition: width var(--transition-base);
}

.gt-nav-links a:hover {
  color: var(--gt-white);
}

.gt-nav-links a:hover::after {
  width: 100%;
}

.gt-nav-links .current-menu-item a,
.gt-nav-links .current-page-ancestor a {
  color: var(--gt-white);
}

.gt-nav-cta {
  margin-left: 24px;
}

/* Hamburger */
.gt-hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  padding:        4px;
  background:     none;
  border:         none;
}

.gt-hamburger span {
  width:      28px;
  height:     2px;
  background: var(--gt-white);
  transition: all var(--transition-base);
  display:    block;
}

/* Full-screen mobile menu */
.gt-mobile-menu {
  position:        fixed;
  inset:           0;
  background:      var(--gt-black);
  z-index:         999;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity var(--transition-slow);
}

.gt-mobile-menu.open {
  opacity:        1;
  pointer-events: all;
}

.gt-mobile-menu .gt-mobile-nav-links {
  list-style:     none;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.gt-mobile-menu .gt-mobile-nav-links a {
  font-family:    var(--font-display);
  font-size:      clamp(32px, 8vw, 52px);
  font-weight:    800;
  color:          var(--gt-white);
  letter-spacing: -1px;
  text-decoration:none;
  transition:     color var(--transition-base);
  display:        block;
}

.gt-mobile-menu .gt-mobile-nav-links a:hover {
  color: var(--gt-red);
}

.gt-mobile-close {
  position: absolute;
  top:      28px;
  right:    28px;
  color:    var(--gt-white);
  cursor:   pointer;
}

/* =============================================
   10. HERO SECTION
   ============================================= */
.gt-hero {
  min-height:     100vh;
  display:        flex;
  align-items:    center;
  background:     var(--gt-black);
  position:       relative;
  overflow:       hidden;
  padding-top:    80px;
}

.gt-hero-bg {
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0, 229, 204, 0.02) 80px, rgba(0, 229, 204, 0.02) 81px),
              repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255, 59, 59, 0.015) 80px, rgba(255, 59, 59, 0.015) 81px);
  pointer-events: none;
}

.gt-hero-content {
  position:  relative;
  z-index:   2;
  max-width: 900px;
}

.gt-hero-tag {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  margin-bottom:  24px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}

.gt-hero-tag::before {
  content:    '';
  width:      40px;
  height:     1px;
  background: var(--gt-cyan);
  flex-shrink:0;
}

.gt-hero-headline {
  font-family:    var(--font-display);
  font-size:      clamp(56px, 8vw, 110px);
  font-weight:    800;
  line-height:    0.95;
  letter-spacing: -3px;
  margin-bottom:  32px;
}

.gt-hero-headline em {
  font-style: normal;
  color:      var(--gt-red);
}

.gt-hero-sub {
  font-size:     clamp(16px, 2vw, 20px);
  color:         var(--gt-gray-400);
  max-width:     520px;
  margin-bottom: 48px;
  line-height:   1.6;
}

.gt-hero-ctas {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

/* Glitch artifacts */
.gt-glitch-artifact {
  position:   absolute;
  pointer-events: none;
  animation:  artifact-flicker 3s infinite;
}

@keyframes artifact-flicker {
  0%, 95%, 100% { opacity: 0; }
  96%           { opacity: 0.8; }
  97%           { opacity: 0.3; }
  98%           { opacity: 0.9; }
  99%           { opacity: 0.2; }
}

/* Scroll indicator */
.gt-scroll-indicator {
  position:        absolute;
  bottom:          40px;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
}

.gt-scroll-indicator span {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 3px;
  color:          var(--gt-gray-400);
  text-transform: uppercase;
}

.gt-scroll-line {
  width:      1px;
  height:     60px;
  background: linear-gradient(to bottom, var(--gt-cyan), transparent);
  animation:  scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.2); }
}

/* =============================================
   11. SERVICES SECTION
   ============================================= */
.gt-services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--gt-border);
  border:                1px solid var(--gt-border);
  border-radius:         var(--radius-md);
  overflow:              hidden;
}

.gt-service-item {
  background: var(--gt-dark);
  padding:    48px 36px;
  transition: all var(--transition-slow);
  position:   relative;
  overflow:   hidden;
}

.gt-service-item::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--gt-cyan-muted);
  opacity:    0;
  transition: opacity var(--transition-slow);
}

.gt-service-item:hover::before {
  opacity: 1;
}

.gt-service-num {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gt-gray-400);
  letter-spacing: 2px;
  margin-bottom:  24px;
}

.gt-service-icon {
  width:         48px;
  height:        48px;
  margin-bottom: 20px;
  color:         var(--gt-cyan);
  position:      relative;
  z-index:       1;
}

.gt-service-title {
  font-family:   var(--font-display);
  font-size:     22px;
  font-weight:   600;
  margin-bottom: 12px;
  position:      relative;
  z-index:       1;
}

.gt-service-desc {
  font-size:     14px;
  color:         var(--gt-gray-400);
  line-height:   1.7;
  margin-bottom: 24px;
  position:      relative;
  z-index:       1;
}

.gt-service-arrow {
  font-family:    var(--font-mono);
  font-size:      12px;
  color:          var(--gt-cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition:     transform var(--transition-base);
  display:        inline-block;
  position:       relative;
  z-index:        1;
}

.gt-service-item:hover .gt-service-arrow {
  transform: translateX(8px);
}

/* =============================================
   12. PORTFOLIO PREVIEW
   ============================================= */
.gt-portfolio-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.gt-portfolio-card {
  position:      relative;
  border-radius: var(--radius-md);
  overflow:      hidden;
  aspect-ratio:  4/3;
  background:    var(--gt-card);
  display:       block;
}

.gt-portfolio-card img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gt-portfolio-card:hover img {
  transform: scale(1.05);
}

.gt-portfolio-overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         28px;
  transition:      all var(--transition-base);
}

.gt-portfolio-cat {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  margin-bottom:  8px;
}

.gt-portfolio-title {
  font-family: var(--font-display);
  font-size:   20px;
  font-weight: 600;
  color:       var(--gt-white);
}

/* Filter buttons */
.gt-filter-bar {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.gt-filter-btn {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        10px 20px;
  border:         1px solid var(--gt-border);
  border-radius:  var(--radius-sm);
  color:          var(--gt-gray-400);
  background:     transparent;
  cursor:         pointer;
  transition:     all var(--transition-base);
}

.gt-filter-btn:hover,
.gt-filter-btn.active {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
  background:   var(--gt-cyan-muted);
}

/* =============================================
   13. STATS SECTION
   ============================================= */
.gt-stats {
  background:    var(--gt-black);
  border-top:    1px solid var(--gt-border);
  border-bottom: 1px solid var(--gt-border);
  padding:       80px 0;
}

.gt-stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   40px;
  text-align:            center;
}

.gt-stat-num {
  font-family:   var(--font-display);
  font-size:     clamp(48px, 6vw, 80px);
  font-weight:   800;
  color:         var(--gt-white);
  line-height:   1;
  margin-bottom: 8px;
}

.gt-stat-num span {
  color: var(--gt-red);
}

.gt-stat-label {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
}

/* =============================================
   14. PROCESS SECTION
   ============================================= */
.gt-process {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   0;
  position:              relative;
}

.gt-process::before {
  content:    '';
  position:   absolute;
  top:        60px;
  left:       10%;
  right:      10%;
  height:     1px;
  background: linear-gradient(90deg, var(--gt-red), var(--gt-cyan));
}

.gt-process-step {
  text-align: center;
  padding:    20px 16px;
}

.gt-process-num {
  font-family:   var(--font-display);
  font-size:     72px;
  font-weight:   800;
  color:         rgba(255, 255, 255, 0.04);
  line-height:   1;
  margin-bottom: 0;
}

.gt-process-dot {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--gt-card);
  border:        2px solid var(--gt-cyan);
  margin:        -8px auto 20px;
  position:      relative;
  z-index:       1;
  transition:    all var(--transition-base);
}

.gt-process-step:hover .gt-process-dot {
  background: var(--gt-cyan);
  box-shadow: var(--shadow-cyan);
}

.gt-process-title {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   600;
  margin-bottom: 8px;
}

.gt-process-desc {
  font-size:   13px;
  color:       var(--gt-gray-400);
  line-height: 1.6;
}

/* =============================================
   15. TESTIMONIALS
   ============================================= */
.gt-testimonial-slider {
  position: relative;
  overflow: hidden;
}

.gt-testimonial-track {
  display:    flex;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.gt-testimonial-item {
  min-width:  100%;
  padding:    0 80px;
  text-align: center;
}

.gt-testimonial-stars {
  color:         var(--gt-red);
  font-size:     20px;
  margin-bottom: 24px;
  letter-spacing:4px;
}

.gt-testimonial-quote {
  font-family:   var(--font-display);
  font-size:     clamp(20px, 3vw, 30px);
  font-weight:   600;
  line-height:   1.4;
  margin-bottom: 32px;
  color:         var(--gt-white);
}

.gt-testimonial-quote::before {
  content: '"';
  color:   var(--gt-cyan);
}

.gt-testimonial-quote::after {
  content: '"';
  color:   var(--gt-cyan);
}

.gt-testimonial-author {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gt-cyan);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gt-testimonial-company {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gt-gray-400);
  letter-spacing: 2px;
  margin-top:     4px;
}

.gt-testimonial-dots {
  display:         flex;
  gap:             8px;
  justify-content: center;
  margin-top:      40px;
}

.gt-testimonial-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--gt-border-2);
  cursor:        pointer;
  transition:    all var(--transition-base);
  border:        none;
}

.gt-testimonial-dot.active {
  background:    var(--gt-cyan);
  width:         24px;
  border-radius: 3px;
}

/* =============================================
   16. CTA SECTION
   ============================================= */
.gt-cta-section {
  background: var(--gt-black);
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

.gt-cta-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at center, rgba(255, 59, 59, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.gt-cta-section .gt-container {
  position: relative;
  z-index:  2;
}

/* =============================================
   17. FOOTER
   ============================================= */
.gt-footer {
  background:  var(--gt-darker);
  border-top:  1px solid var(--gt-border);
  padding:     80px 0 40px;
}

.gt-footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   60px;
  margin-bottom:         60px;
}

.gt-footer-brand img {
  height:        36px;
  margin-bottom: 20px;
}

.gt-footer-brand-text {
  font-family:    var(--font-display);
  font-size:      24px;
  font-weight:    800;
  margin-bottom:  16px;
  letter-spacing: -1px;
}

.gt-footer-brand-text span {
  color: var(--gt-red);
}

.gt-footer-brand p {
  font-size:   14px;
  color:       var(--gt-gray-400);
  line-height: 1.7;
  max-width:   280px;
  margin-bottom: 20px;
}

.gt-footer-nap {
  font-family: var(--font-mono);
  font-size:   12px;
  color:       var(--gt-gray-400);
  line-height: 1.8;
}

.gt-footer-nap a {
  color:      var(--gt-cyan);
  transition: color var(--transition-base);
}

.gt-footer-nap a:hover {
  color: var(--gt-white);
}

.gt-footer-social {
  display: flex;
  gap:     16px;
  margin-top: 24px;
}

.gt-footer-social a {
  width:         40px;
  height:        40px;
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--gt-gray-400);
  transition:    all var(--transition-base);
}

.gt-footer-social a:hover {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
  background:   var(--gt-cyan-muted);
}

.gt-footer-col h4 {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  margin-bottom:  20px;
}

.gt-footer-col ul {
  list-style: none;
}

.gt-footer-col ul li {
  margin-bottom: 10px;
}

.gt-footer-col ul li a {
  font-size:   14px;
  color:       var(--gt-gray-400);
  text-decoration: none;
  transition:  color var(--transition-base);
}

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

.gt-footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     32px;
  border-top:      1px solid var(--gt-border);
  flex-wrap:       wrap;
  gap:             16px;
}

.gt-footer-bottom p {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gt-gray-400);
  letter-spacing: 1px;
}

.gt-footer-bottom a {
  color:      var(--gt-gray-400);
  transition: color var(--transition-base);
}

.gt-footer-bottom a:hover {
  color: var(--gt-white);
}

/* Back to top */
.gt-back-to-top {
  width:         48px;
  height:        48px;
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content:center;
  color:         var(--gt-gray-400);
  cursor:        pointer;
  transition:    all var(--transition-base);
  background:    var(--gt-card);
  position:      fixed;
  bottom:        32px;
  right:         32px;
  z-index:       100;
  opacity:       0;
  transform:     translateY(20px);
  pointer-events:none;
}

.gt-back-to-top.visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: all;
}

.gt-back-to-top:hover {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
}

/* =============================================
   18. CUSTOM CURSOR
   ============================================= */
.gt-cursor {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--gt-white);
  position:      fixed;
  top:           0;
  left:          0;
  pointer-events:none;
  z-index:       9999;
  mix-blend-mode:difference;
  transition:    transform 0.1s;
}

.gt-cursor-ring {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  border:        1px solid rgba(255, 255, 255, 0.5);
  position:      fixed;
  top:           0;
  left:          0;
  pointer-events:none;
  z-index:       9998;
  transition:    transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
}

.gt-cursor-ring.hovering {
  width:        60px;
  height:       60px;
  border-color: var(--gt-cyan);
}

/* Hide default cursor when custom is active */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"] { cursor: none; }
}

/* =============================================
   19. UTILITY CLASSES
   ============================================= */
.gt-reveal {
  opacity:   0;
  transform: translateY(40px);
}

.gt-reveal-left {
  opacity:   0;
  transform: translateX(-40px);
}

.gt-reveal-right {
  opacity:   0;
  transform: translateX(40px);
}

.gt-parallax {
  will-change: transform;
}

.gt-section-tag {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  display:        flex;
  align-items:    center;
  gap:            16px;
  margin-bottom:  20px;
}

.gt-section-tag::after {
  content:   '';
  flex:      1;
  max-width: 60px;
  height:    1px;
  background:var(--gt-cyan);
}

.gt-divider {
  height:     1px;
  background: var(--gt-border);
  border:     none;
  margin:     0;
}

.gt-text-red  { color: var(--gt-red); }
.gt-text-cyan { color: var(--gt-cyan); }
.gt-text-gray { color: var(--gt-gray-400); }

.gt-bg-dark    { background: var(--gt-dark); }
.gt-bg-card    { background: var(--gt-card); }
.gt-bg-darker  { background: var(--gt-darker); }

.gt-mb-sm  { margin-bottom: 16px; }
.gt-mb-md  { margin-bottom: 24px; }
.gt-mb-lg  { margin-bottom: 48px; }
.gt-mb-xl  { margin-bottom: 80px; }
.gt-mt-lg  { margin-top: 48px; }

.gt-flex-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.gt-flex-between {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* =============================================
   20. FORM STYLES
   ============================================= */
.gt-form-group {
  margin-bottom: 24px;
}

.gt-form-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
  display:        block;
  margin-bottom:  8px;
}

.gt-form-input {
  width:         100%;
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
  color:         var(--gt-white);
  font-family:   var(--font-body);
  font-size:     15px;
  padding:       14px 20px;
  border-radius: var(--radius-sm);
  transition:    border-color var(--transition-base);
  outline:       none;
}

.gt-form-input:focus {
  border-color: var(--gt-cyan);
  box-shadow:   0 0 0 3px rgba(0, 229, 204, 0.08);
}

.gt-form-input::placeholder {
  color: var(--gt-gray-600);
}

select.gt-form-input {
  appearance:       none;
  -webkit-appearance:none;
  cursor:           pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position:right 16px center;
  padding-right: 40px;
}

select.gt-form-input option {
  background: var(--gt-card);
  color:      var(--gt-white);
}

textarea.gt-form-input {
  min-height: 140px;
  resize:     vertical;
}

.gt-form-error {
  font-size:    12px;
  color:        var(--gt-red);
  margin-top:   4px;
  display:      none;
  font-family:  var(--font-mono);
  letter-spacing:1px;
}

.gt-form-success {
  background:    var(--gt-cyan-muted);
  border:        1px solid var(--gt-cyan);
  color:         var(--gt-cyan);
  padding:       16px 24px;
  border-radius: var(--radius-sm);
  font-size:     14px;
  display:       none;
}

/* Multi-step indicator */
.gt-step-indicator {
  display:       flex;
  gap:           0;
  margin-bottom: 48px;
}

.gt-step {
  flex:     1;
  text-align:center;
  position: relative;
}

.gt-step::after {
  content:    '';
  position:   absolute;
  top:        16px;
  left:       50%;
  right:      -50%;
  height:     1px;
  background: var(--gt-border);
  z-index:    0;
}

.gt-step:last-child::after {
  display: none;
}

.gt-step-num {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--gt-card);
  border:          1px solid var(--gt-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-size:       12px;
  margin:          0 auto 8px;
  position:        relative;
  z-index:         1;
  transition:      all var(--transition-base);
}

.gt-step-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
}

.gt-step.active .gt-step-num {
  background:   var(--gt-cyan);
  border-color: var(--gt-cyan);
  color:        var(--gt-black);
}

.gt-step.active .gt-step-label {
  color: var(--gt-cyan);
}

.gt-step.done .gt-step-num {
  background:   var(--gt-red);
  border-color: var(--gt-red);
  color:        var(--gt-white);
}

.gt-step-content {
  display: none;
}

/* =============================================
   21. BLOG / ARCHIVE
   ============================================= */
.gt-blog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
}

.gt-blog-card {
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    all var(--transition-slow);
  display:       flex;
  flex-direction:column;
}

.gt-blog-card:hover {
  border-color: var(--gt-border-2);
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-lg);
}

.gt-blog-card-img {
  aspect-ratio: 16/9;
  overflow:     hidden;
}

.gt-blog-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gt-blog-card:hover .gt-blog-card-img img {
  transform: scale(1.05);
}

.gt-blog-card-body {
  padding: 28px;
  flex:    1;
  display: flex;
  flex-direction: column;
}

.gt-blog-cat {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  margin-bottom:  12px;
}

.gt-blog-title {
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   600;
  line-height:   1.3;
  margin-bottom: 12px;
  color:         var(--gt-white);
  transition:    color var(--transition-base);
}

.gt-blog-card:hover .gt-blog-title {
  color: var(--gt-cyan);
}

.gt-blog-excerpt {
  font-size:     14px;
  color:         var(--gt-gray-400);
  line-height:   1.7;
  flex:          1;
  margin-bottom: 20px;
}

.gt-blog-meta {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gt-gray-400);
  letter-spacing: 1px;
  display:        flex;
  gap:            16px;
  border-top:     1px solid var(--gt-border);
  padding-top:    16px;
  margin-top:     auto;
}

/* =============================================
   22. SINGLE POST
   ============================================= */
.gt-article-header {
  max-width:     820px;
  margin:        0 auto;
  text-align:    center;
  padding-bottom:60px;
}

.gt-article-body {
  max-width:   820px;
  margin:      0 auto;
  font-size:   17px;
  line-height: 1.8;
  color:       var(--gt-off-white);
}

.gt-article-body h2,
.gt-article-body h3,
.gt-article-body h4 {
  font-family:   var(--font-display);
  margin-top:    48px;
  margin-bottom: 16px;
  color:         var(--gt-white);
}

.gt-article-body p {
  margin-bottom: 24px;
}

.gt-article-body a {
  color:          var(--gt-cyan);
  border-bottom:  1px solid rgba(0, 229, 204, 0.3);
  transition:     all var(--transition-base);
}

.gt-article-body a:hover {
  border-bottom-color: var(--gt-cyan);
}

.gt-article-body ul,
.gt-article-body ol {
  margin-bottom: 24px;
  padding-left:  28px;
  list-style:    disc;
  color:         var(--gt-off-white);
}

.gt-article-body blockquote {
  border-left:   3px solid var(--gt-cyan);
  padding-left:  24px;
  margin:        40px 0;
  color:         var(--gt-gray-400);
  font-size:     18px;
  font-style:    italic;
}

.gt-article-body code {
  font-family:   var(--font-mono);
  font-size:     13px;
  background:    var(--gt-card);
  padding:       2px 8px;
  border-radius: 3px;
  color:         var(--gt-cyan);
}

.gt-article-body pre {
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-md);
  padding:       24px;
  overflow-x:    auto;
  margin-bottom: 24px;
}

.gt-article-body pre code {
  background: none;
  padding:    0;
}

.gt-article-body img {
  border-radius: var(--radius-md);
  width:         100%;
  margin-bottom: 32px;
}

/* Share buttons */
.gt-share-bar {
  display:     flex;
  gap:         12px;
  margin-top:  48px;
  padding-top: 32px;
  border-top:  1px solid var(--gt-border);
  align-items: center;
}

.gt-share-label {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
  margin-right:   8px;
}

.gt-share-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 20px;
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-sm);
  font-family:   var(--font-mono);
  font-size:     11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:         var(--gt-gray-400);
  cursor:        pointer;
  transition:    all var(--transition-base);
  background:    transparent;
  text-decoration:none;
}

.gt-share-btn:hover {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
}

/* =============================================
   23. 404 PAGE
   ============================================= */
.gt-404 {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  background:      var(--gt-black);
}

.gt-404-num {
  font-family:    var(--font-display);
  font-size:      clamp(120px, 20vw, 220px);
  font-weight:    800;
  line-height:    1;
  letter-spacing: -8px;
  color:          var(--gt-white);
  position:       relative;
}

/* =============================================
   24. SERVICES PAGE
   ============================================= */
.gt-service-full {
  padding:       80px 0;
  border-bottom: 1px solid var(--gt-border);
}

.gt-service-full-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.gt-service-num-large {
  font-family:    var(--font-display);
  font-size:      120px;
  font-weight:    800;
  color:          rgba(255, 255, 255, 0.03);
  line-height:    1;
  letter-spacing: -4px;
  margin-bottom:  -40px;
}

.gt-feature-list {
  list-style: none;
  margin-top: 24px;
}

.gt-feature-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  margin-bottom: 12px;
  font-size:     15px;
  color:         var(--gt-off-white);
}

.gt-feature-list li::before {
  content:     '→';
  color:       var(--gt-cyan);
  flex-shrink: 0;
  margin-top:  1px;
  font-family: var(--font-mono);
}

/* FAQ */
.gt-faq-item {
  border-bottom: 1px solid var(--gt-border);
}

.gt-faq-question {
  width:           100%;
  text-align:      left;
  padding:         24px 0;
  font-family:     var(--font-display);
  font-size:       18px;
  font-weight:     600;
  color:           var(--gt-white);
  cursor:          pointer;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      none;
  border:          none;
}

.gt-faq-question span {
  font-size:   24px;
  color:       var(--gt-cyan);
  transition:  transform var(--transition-base);
  font-weight: 300;
}

.gt-faq-question.open span {
  transform: rotate(45deg);
}

.gt-faq-answer {
  padding-bottom: 24px;
  color:          var(--gt-gray-400);
  font-size:      15px;
  line-height:    1.7;
  display:        none;
}

.gt-faq-answer.open {
  display: block;
}

/* =============================================
   25. ABOUT PAGE
   ============================================= */
.gt-team-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   32px;
}

.gt-team-card {
  text-align: center;
}

.gt-team-photo {
  aspect-ratio:  1/1;
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: 20px;
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
}

.gt-team-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(30%);
  transition: filter var(--transition-base);
}

.gt-team-card:hover .gt-team-photo img {
  filter: none;
}

.gt-team-name {
  font-family:   var(--font-display);
  font-size:     18px;
  font-weight:   600;
  margin-bottom: 4px;
}

.gt-team-role {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
}

/* =============================================
   26. CONTACT PAGE
   ============================================= */
.gt-contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.5fr;
  gap:                   80px;
  align-items:           flex-start;
}

.gt-contact-info-item {
  display:       flex;
  gap:           16px;
  margin-bottom: 32px;
}

.gt-contact-icon {
  width:           48px;
  height:          48px;
  border:          1px solid var(--gt-border);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gt-cyan);
  flex-shrink:     0;
}

.gt-contact-info-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
  margin-bottom:  4px;
}

.gt-contact-info-value {
  font-size:   16px;
  color:       var(--gt-white);
  line-height: 1.5;
}

.gt-map-wrap {
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid var(--gt-border);
  margin-top:    32px;
}

.gt-map-wrap iframe {
  display:    block;
  width:      100%;
  height:     280px;
  border:     none;
  filter:     grayscale(80%) invert(90%) contrast(90%);
}

/* =============================================
   27. PAGINATION
   ============================================= */
.gt-pagination {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-top:      64px;
  flex-wrap:       wrap;
}

.gt-pagination .page-numbers {
  font-family:    var(--font-mono);
  font-size:      13px;
  padding:        10px 18px;
  border:         1px solid var(--gt-border);
  border-radius:  var(--radius-sm);
  color:          var(--gt-gray-400);
  transition:     all var(--transition-base);
  text-decoration:none;
  letter-spacing: 1px;
}

.gt-pagination .page-numbers:hover,
.gt-pagination .page-numbers.current {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
  background:   var(--gt-cyan-muted);
}

/* =============================================
   28. SEARCH
   ============================================= */
.gt-search-form {
  display:       flex;
  gap:           0;
  margin-bottom: 48px;
  max-width:     600px;
}

.gt-search-input {
  flex:          1;
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
  border-right:  none;
  color:         var(--gt-white);
  font-size:     16px;
  padding:       16px 24px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  outline:       none;
}

.gt-search-input:focus {
  border-color: var(--gt-cyan);
}

.gt-search-submit {
  background:    var(--gt-red);
  color:         var(--gt-white);
  border:        none;
  padding:       16px 28px;
  cursor:        pointer;
  font-family:   var(--font-display);
  font-size:     13px;
  font-weight:   600;
  text-transform:uppercase;
  letter-spacing:1px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition:    background var(--transition-base);
}

.gt-search-submit:hover {
  background: #ff5555;
}

/* =============================================
   29. SIDEBAR
   ============================================= */
.gt-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: flex-start;
}

.gt-widget {
  margin-bottom: 40px;
}

.gt-widget-title {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-cyan);
  margin-bottom:  20px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--gt-border);
}

/* =============================================
   30. PORTFOLIO SINGLE
   ============================================= */
.gt-project-hero {
  width:         100%;
  aspect-ratio:  21/9;
  object-fit:    cover;
  border-radius: var(--radius-md);
  margin-bottom: 64px;
}

.gt-project-layout {
  display:               grid;
  grid-template-columns: 1fr 300px;
  gap:                   64px;
  align-items:           flex-start;
}

.gt-project-sidebar {
  position: sticky;
  top:      100px;
}

.gt-project-meta-item {
  margin-bottom: 28px;
}

.gt-project-meta-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gt-gray-400);
  margin-bottom:  6px;
}

.gt-project-meta-value {
  font-size: 15px;
  color:     var(--gt-white);
}

.gt-project-section {
  margin-bottom: 48px;
}

.gt-project-section-label {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gt-red);
  margin-bottom:  16px;
}

/* =============================================
   31. RESPONSIVE BREAKPOINTS
   ============================================= */
@media (max-width: 1200px) {
  .gt-container       { padding: 0 32px; }
  .gt-services-grid   { grid-template-columns: repeat(2, 1fr); }
  .gt-team-grid       { grid-template-columns: repeat(3, 1fr); }
  .gt-footer-grid     { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .gt-service-full-grid { gap: 48px; }
}

@media (max-width: 992px) {
  .gt-portfolio-grid  { grid-template-columns: repeat(2, 1fr); }
  .gt-blog-grid       { grid-template-columns: repeat(2, 1fr); }
  .gt-process         { grid-template-columns: repeat(3, 1fr); }
  .gt-process::before { display: none; }
  .gt-stats-grid      { grid-template-columns: repeat(2, 1fr); }
  .gt-footer-grid     { grid-template-columns: 1fr 1fr; gap: 40px; }
  .gt-nav-links, .gt-nav-cta { display: none; }
  .gt-hamburger       { display: flex; }
  .gt-contact-grid    { grid-template-columns: 1fr; gap: 48px; }
  .gt-sidebar-layout  { grid-template-columns: 1fr; }
  .gt-project-layout  { grid-template-columns: 1fr; }
  .gt-service-full-grid { grid-template-columns: 1fr; gap: 32px; }
  .gt-team-grid       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gt-section           { padding: 80px 0; }
  .gt-container         { padding: 0 20px; }
  .gt-container-sm      { padding: 0 20px; }
  .gt-portfolio-grid    { grid-template-columns: 1fr; }
  .gt-blog-grid         { grid-template-columns: 1fr; }
  .gt-services-grid     { grid-template-columns: 1fr; }
  .gt-stats-grid        { grid-template-columns: 1fr 1fr; }
  .gt-footer-grid       { grid-template-columns: 1fr; }
  .gt-testimonial-item  { padding: 0 20px; }
  .gt-process           { grid-template-columns: repeat(1, 1fr); }
  .gt-hero-headline     { letter-spacing: -2px; }
  .gt-team-grid         { grid-template-columns: 1fr 1fr; }
  .gt-nav               { padding: 0 20px; }
  .gt-footer-bottom     { flex-direction: column; text-align: center; }
  .gt-cursor, .gt-cursor-ring { display: none; }
  body { cursor: auto; }
}

@media (max-width: 480px) {
  .gt-hero-ctas { flex-direction: column; align-items: flex-start; }
  .gt-stats-grid { grid-template-columns: 1fr; }
  .gt-btn { width: 100%; justify-content: center; }
  .gt-team-grid { grid-template-columns: 1fr; }
}

/* =============================================
   32. COOKIE CONSENT BANNER
   ============================================= */
.gt-cookie-banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    9999;
  background: #111111;
  border-top: 1px solid var(--gt-border);
  transform:  translateY(100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}

.gt-cookie-banner--visible {
  transform: translateY(0);
}

.gt-cookie-banner--hiding {
  transform: translateY(100%);
}

.gt-cookie-banner__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  padding-top:     20px;
  padding-bottom:  20px;
  flex-wrap:       wrap;
}

.gt-cookie-banner__text {
  color:       var(--gt-gray-400);
  font-size:   13px;
  line-height: 1.6;
  margin:      0;
  flex:        1;
  font-family: var(--font-mono);
}

.gt-cookie-banner__link {
  color:           var(--gt-cyan);
  text-decoration: underline;
  margin-left:     4px;
}

.gt-cookie-banner__actions {
  display:    flex;
  gap:        12px;
  flex-shrink:0;
}

.gt-btn--sm {
  padding:   10px 20px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .gt-cookie-banner__inner { flex-direction: column; align-items: flex-start; }
  .gt-cookie-banner__actions { width: 100%; }
  .gt-cookie-banner__actions .gt-btn { flex: 1; }
}

/* =============================================
   33. WHATSAPP FLOATING BUTTON
   ============================================= */
.gt-whatsapp-btn {
  position:        fixed;
  bottom:          32px;
  right:           32px;
  z-index:         999;
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      #25D366;
  color:           #fff;
  border-radius:   50px;
  padding:         14px 20px 14px 16px;
  text-decoration: none;
  box-shadow:      0 4px 20px rgba(37, 211, 102, 0.4);
  transition:      all 0.3s ease;
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     600;
  max-width:       56px;
  overflow:        hidden;
}

.gt-whatsapp-btn:hover {
  max-width:    220px;
  box-shadow:   0 8px 32px rgba(37, 211, 102, 0.5);
  transform:    translateY(-2px);
}

.gt-whatsapp-btn__label {
  white-space: nowrap;
  opacity:     0;
  max-width:   0;
  overflow:    hidden;
  transition:  opacity 0.2s ease 0.1s, max-width 0.3s ease;
}

.gt-whatsapp-btn:hover .gt-whatsapp-btn__label {
  opacity:   1;
  max-width: 160px;
}

@media (max-width: 768px) {
  .gt-whatsapp-btn { bottom: 80px; right: 20px; padding: 14px; border-radius: 50%; max-width: 56px; }
  .gt-whatsapp-btn__label { display: none; }
  .gt-whatsapp-btn:hover { max-width: 56px; }
}

/* =============================================
   34. LIGHTBOX (Portfolio)
   ============================================= */
.gt-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         10000;
  background:      rgba(0, 0, 0, 0.95);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity 0.3s ease, visibility 0.3s ease;
  padding:         20px;
}

.gt-lightbox.is-open {
  opacity:    1;
  visibility: visible;
}

.gt-lightbox__inner {
  position:   relative;
  max-width:  1200px;
  max-height: 90vh;
  width:      100%;
}

.gt-lightbox__img {
  width:         100%;
  max-height:    85vh;
  object-fit:    contain;
  border-radius: var(--radius-md);
}

.gt-lightbox__close {
  position:    absolute;
  top:         -48px;
  right:       0;
  background:  transparent;
  border:      none;
  color:       #fff;
  font-size:   28px;
  cursor:      pointer;
  width:       40px;
  height:      40px;
  display:     flex;
  align-items: center;
  justify-content: center;
  opacity:     0.7;
  transition:  opacity 0.2s;
}
.gt-lightbox__close:hover { opacity: 1; }

.gt-lightbox__nav {
  position:    absolute;
  top:         50%;
  transform:   translateY(-50%);
  background:  rgba(255,255,255,0.1);
  border:      none;
  color:       #fff;
  width:       48px;
  height:      48px;
  border-radius: 50%;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   20px;
  transition:  background 0.2s;
  backdrop-filter: blur(4px);
}
.gt-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.gt-lightbox__prev { left: -64px; }
.gt-lightbox__next { right: -64px; }

.gt-lightbox__caption {
  text-align:  center;
  color:       var(--gt-gray-400);
  font-size:   13px;
  font-family: var(--font-mono);
  margin-top:  12px;
}

@media (max-width: 768px) {
  .gt-lightbox__prev { left: 0; }
  .gt-lightbox__next { right: 0; }
}

/* Portfolio card — lightbox trigger */
.gt-portfolio-card[data-lightbox] { cursor: zoom-in; }

/* =============================================
   35. VIDEO MODAL (Testimonials)
   ============================================= */
.gt-video-modal {
  position:        fixed;
  inset:           0;
  z-index:         10001;
  background:      rgba(0, 0, 0, 0.97);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity 0.3s ease, visibility 0.3s ease;
  padding:         20px;
}

.gt-video-modal.is-open {
  opacity:    1;
  visibility: visible;
}

.gt-video-modal__inner {
  position:   relative;
  width:      100%;
  max-width:  900px;
}

.gt-video-modal__embed {
  position:        relative;
  padding-bottom:  56.25%; /* 16:9 */
  height:          0;
  border-radius:   var(--radius-md);
  overflow:        hidden;
}

.gt-video-modal__embed iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}

.gt-video-modal__close {
  position:    absolute;
  top:         -48px;
  right:       0;
  background:  transparent;
  border:      none;
  color:       #fff;
  font-size:   28px;
  cursor:      pointer;
  width:       40px;
  height:      40px;
  display:     flex;
  align-items: center;
  justify-content: center;
  opacity:     0.7;
  transition:  opacity 0.2s;
}
.gt-video-modal__close:hover { opacity: 1; }

/* Video trigger button on testimonial */
.gt-testimonial-video-trigger {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  color:           var(--gt-cyan);
  font-size:       13px;
  font-family:     var(--font-mono);
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         0;
  margin-top:      12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================
   36. SEARCH TABS (search.php)
   ============================================= */
.gt-search-tabs {
  display:    flex;
  gap:        4px;
  margin:     40px 0 32px;
  border-bottom: 1px solid var(--gt-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.gt-search-tabs::-webkit-scrollbar { display: none; }

.gt-search-tab {
  display:        flex;
  align-items:    center;
  gap:            8px;
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          var(--gt-gray-400);
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    500;
  padding:        12px 20px;
  cursor:         pointer;
  white-space:    nowrap;
  margin-bottom:  -1px;
  transition:     color 0.2s, border-color 0.2s;
}

.gt-search-tab:hover {
  color: var(--gt-white);
}

.gt-search-tab.active,
.gt-search-tab[aria-selected="true"] {
  color:         var(--gt-white);
  border-bottom-color: var(--gt-red);
}

.gt-tab-count {
  background:  var(--gt-border);
  color:       var(--gt-gray-400);
  font-size:   11px;
  font-family: var(--font-mono);
  padding:     2px 7px;
  border-radius: 10px;
  line-height: 1.4;
}

.gt-search-tab.active .gt-tab-count,
.gt-search-tab[aria-selected="true"] .gt-tab-count {
  background: var(--gt-red-muted);
  color:      var(--gt-red);
}

.gt-search-tab-panel { display: none; }
.gt-search-tab-panel.active { display: block; }

/* Search result cards */
.gt-search-results-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.gt-search-result-card {
  background:    var(--gt-card);
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    border-color 0.2s, transform 0.2s;
}

.gt-search-result-card:hover {
  border-color: var(--gt-red);
  transform:    translateY(-2px);
}

.gt-search-result-thumb {
  display:  block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.gt-search-result-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gt-search-result-card:hover .gt-search-result-thumb img {
  transform: scale(1.05);
}

.gt-search-result-body { padding: 20px; }

.gt-search-type-badge {
  display:      inline-block;
  font-size:    10px;
  font-family:  var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color:        var(--gt-red);
  border:       1px solid rgba(255,59,59,0.3);
  border-radius: 3px;
  padding:      2px 8px;
  margin-bottom: 8px;
}

.gt-badge-portfolio { color: var(--gt-cyan); border-color: rgba(0,229,204,0.3); }
.gt-badge-case      { color: #a78bfa;         border-color: rgba(167,139,250,0.3); }

.gt-search-result-title {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   700;
  line-height:   1.3;
  margin-bottom: 8px;
}

.gt-search-result-title a {
  color:           var(--gt-white);
  text-decoration: none;
}
.gt-search-result-title a:hover { color: var(--gt-red); }

.gt-search-result-excerpt {
  font-size:   14px;
  color:       var(--gt-gray-400);
  line-height: 1.6;
  margin-bottom: 12px;
}

.gt-search-result-date {
  font-size:   12px;
  font-family: var(--font-mono);
  color:       var(--gt-gray-600);
}

.gt-search-header { margin-bottom: 32px; }
.gt-search-count  { color: var(--gt-gray-400); font-size: 14px; margin-top: 8px; }

.gt-search-form-wrap { margin-bottom: 16px; }
.gt-search-form {
  display:  flex;
  gap:      12px;
  flex-wrap:wrap;
}
.gt-search-input { flex: 1; min-width: 240px; }

.gt-search-empty {
  text-align: center;
  padding: 80px 0;
  color:   var(--gt-gray-400);
}
.gt-search-empty-icon {
  color:         var(--gt-gray-600);
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .gt-search-results-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .gt-search-results-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   37. GT-PROSE (article body styles)
   ============================================= */
.gt-prose {
  color:       var(--gt-off-white);
  line-height: 1.8;
  font-size:   17px;
  max-width:   720px;
}

.gt-prose h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--gt-white); margin: 2em 0 0.6em; }
.gt-prose h3 { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; color: var(--gt-white); margin: 1.6em 0 0.5em; }
.gt-prose h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--gt-white); margin: 1.4em 0 0.4em; }

.gt-prose p { margin-bottom: 1.4em; }

.gt-prose a { color: var(--gt-cyan); text-decoration: underline; text-underline-offset: 3px; }
.gt-prose a:hover { color: var(--gt-red); }

.gt-prose strong { color: var(--gt-white); font-weight: 700; }
.gt-prose em     { color: #aaa; }

.gt-prose ul, .gt-prose ol { padding-left: 1.5em; margin-bottom: 1.4em; }
.gt-prose ul { list-style: none; }
.gt-prose ul li { position: relative; margin-bottom: 0.5em; }
.gt-prose ul li::before { content: '—'; color: var(--gt-red); font-weight: 700; position: absolute; left: -1.4em; }
.gt-prose ol li { margin-bottom: 0.5em; }

.gt-prose blockquote {
  border-left: 3px solid var(--gt-red);
  margin:      2em 0;
  padding:     16px 24px;
  background:  var(--gt-dark);
  border-radius: 0 6px 6px 0;
  color:       var(--gt-gray-400);
  font-size:   18px;
  font-style:  italic;
}

.gt-prose code {
  font-family:   var(--font-mono);
  font-size:     0.875em;
  background:    var(--gt-dark);
  border:        1px solid var(--gt-border);
  border-radius: 4px;
  padding:       2px 6px;
  color:         var(--gt-cyan);
}

.gt-prose pre {
  background:    var(--gt-dark);
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-md);
  padding:       24px;
  overflow-x:    auto;
  margin-bottom: 1.4em;
}

.gt-prose pre code {
  background: transparent;
  border:     none;
  padding:    0;
  color:      var(--gt-off-white);
  font-size:  14px;
  line-height:1.7;
}

.gt-prose img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--radius-md);
  margin:        1.5em 0;
}

.gt-prose figure { margin: 1.5em 0; }
.gt-prose figcaption {
  color:       var(--gt-gray-600);
  font-size:   13px;
  font-family: var(--font-mono);
  text-align:  center;
  margin-top:  8px;
}

.gt-prose hr {
  border:     none;
  border-top: 1px solid var(--gt-border);
  margin:     2.5em 0;
}

.gt-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.gt-prose th    { background: var(--gt-dark); color: var(--gt-gray-400); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--gt-border); }
.gt-prose td    { padding: 10px 16px; border-bottom: 1px solid var(--gt-border); color: var(--gt-off-white); vertical-align: top; font-size: 15px; }

/* =============================================
   38. LIGHT MODE — theme toggle
   ============================================= */

/* Toggle button in nav */
.gt-theme-toggle {
  width:           40px;
  height:          40px;
  border:          1px solid var(--gt-border-2);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--gt-gray-400);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--transition-base);
  flex-shrink:     0;
  margin-right:    8px;
  position:        relative;
  overflow:        hidden;
}

.gt-theme-toggle:hover {
  border-color: var(--gt-cyan);
  color:        var(--gt-cyan);
  background:   var(--gt-cyan-muted);
}

/* Sun icon — shown in dark mode (click to go light) */
.gt-theme-toggle .gt-icon-sun  { display: block; }
.gt-theme-toggle .gt-icon-moon { display: none;  }

/* Moon icon — shown in light mode (click to go dark) */
[data-theme="light"] .gt-theme-toggle .gt-icon-sun  { display: none;  }
[data-theme="light"] .gt-theme-toggle .gt-icon-moon { display: block; }

/* ── Light mode variable overrides ─────────────── */
[data-theme="light"] {
  --gt-black:      #F7F7F7;
  --gt-dark:       #EFEFEF;
  --gt-darker:     #E8E8E8;
  --gt-card:       #FFFFFF;
  --gt-card-2:     #F3F3F3;
  --gt-border:     #E0E0E0;
  --gt-border-2:   #CCCCCC;
  --gt-white:      #111111;
  --gt-off-white:  #222222;
  --gt-gray-400:   #666666;
  --gt-gray-600:   #888888;
  --gt-red:        #E82B2B;
  --gt-cyan:       #008C7F;
  --gt-red-muted:  rgba(232, 43, 43, 0.10);
  --gt-cyan-muted: rgba(0, 140, 127, 0.08);
  --shadow-sm:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-md:  0 12px 40px rgba(0,0,0,0.12);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.16);
  --shadow-red: 0 8px 32px rgba(232, 43, 43, 0.18);
  --shadow-cyan:0 8px 32px rgba(0, 140, 127, 0.15);
}

/* Light mode specific overrides */
[data-theme="light"] body {
  background-color: var(--gt-black);
  color:            var(--gt-white);
}

[data-theme="light"] .gt-nav {
  background: rgba(247, 247, 247, 0.92);
  border-bottom: 1px solid var(--gt-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] .gt-nav.scrolled {
  background: rgba(247, 247, 247, 0.97);
}

[data-theme="light"] .gt-hero {
  background: var(--gt-black);
}

[data-theme="light"] .gt-hero-bg {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0,140,127,0.04) 80px, rgba(0,140,127,0.04) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(232,43,43,0.03) 80px, rgba(232,43,43,0.03) 81px);
}

[data-theme="light"] .gt-stats {
  background: #EFEFEF;
  border-color: var(--gt-border);
}

[data-theme="light"] .gt-service-item {
  background: var(--gt-card);
}

[data-theme="light"] .gt-services-grid {
  background: var(--gt-border);
  border-color: var(--gt-border);
}

[data-theme="light"] .gt-portfolio-card {
  background: var(--gt-card-2);
}

[data-theme="light"] .gt-footer {
  background: #E8E8E8;
  border-top-color: var(--gt-border);
}

[data-theme="light"] .gt-mobile-menu {
  background: #FAFAFA;
}

[data-theme="light"] .gt-mobile-menu .gt-mobile-nav-links a {
  color: #111111;
}

[data-theme="light"] .gt-mobile-menu .gt-mobile-nav-links a:hover {
  color: var(--gt-red);
}

[data-theme="light"] .gt-form-input {
  background: #FFFFFF;
  color:      #111111;
  border-color: var(--gt-border);
}

[data-theme="light"] .gt-form-input::placeholder {
  color: #999999;
}

[data-theme="light"] select.gt-form-input option {
  background: #FFFFFF;
  color:      #111111;
}

[data-theme="light"] .gt-card {
  background:   #FFFFFF;
  border-color: var(--gt-border);
  box-shadow:   0 2px 12px rgba(0,0,0,0.06);
}

[data-theme="light"] .gt-cta-section {
  background: #EFEFEF;
}

[data-theme="light"] .gt-cta-section::before {
  background: radial-gradient(ellipse at center, rgba(232, 43, 43, 0.06) 0%, transparent 70%);
}

[data-theme="light"] .gt-cursor {
  background: #111111;
}

[data-theme="light"] .gt-cursor-ring {
  border-color: rgba(17, 17, 17, 0.4);
}

[data-theme="light"] .gt-back-to-top {
  background:   #FFFFFF;
  border-color: var(--gt-border);
  color:        #666666;
}

[data-theme="light"] .gt-testimonial-quote {
  color: #111111;
}

[data-theme="light"] .gt-process-num {
  color: rgba(0,0,0,0.06);
}

[data-theme="light"] .gt-process-dot {
  background: #FFFFFF;
}

[data-theme="light"] .gt-process::before {
  background: linear-gradient(90deg, var(--gt-red), var(--gt-cyan));
}

/* Smooth transition when toggling */
body,
body * {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* But keep animation transitions override-free for performance */
.gt-glitch::before,
.gt-glitch::after,
.gt-glitch-artifact,
.gt-scroll-line,
.gt-testimonial-track,
.gt-cursor,
.gt-cursor-ring {
  transition: none;
}