/* ===========================
   QUANTUM NEXT — Design System based on NexaDigital
   Fonts: Manrope + Inter
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --primary:        #0066FF;
  --primary-dark:   #0050CB;
  --primary-glow:   rgba(0,102,255,0.18);
  --surface:        #0a0c14;
  --surface-1:      #0f1220;
  --surface-2:      #141827;
  --surface-3:      #1a1f30;
  --text:           #f0f2ff;
  --text-muted:     #8892b0;
  --text-dim:       #4a5568;
  --accent1:        #7C3AED;
  --accent2:        #06B6D4;
  --accent3:        #F59E0B;
  --accent4:        #10B981;
  --accent5:        #EC4899;
  --gradient:       linear-gradient(135deg, #0066FF, #7C3AED);
  --border:         rgba(255,255,255,0.07);
  --border-light:   rgba(255,255,255,0.12);
  --shadow:         0 25px 50px rgba(0,0,0,0.6);
  --shadow-sm:      0 8px 24px rgba(0,0,0,0.4);
  --radius:         6px;
  --radius-lg:      10px;
  --radius-xl:      14px;
  --nav-h:          72px;
  --transition:     cubic-bezier(0.23,1,0.32,1);
  /* legacy compat aliases */
  --blue-400:       #60a5fa;
  --blue-300:       #93c5fd;
  --indigo-500:     #6366f1;
  --font-display:   'Manrope',sans-serif;
  --text-secondary: #8892b0;
  --text-primary:   #f0f2ff;
  --grad-blue:      linear-gradient(135deg,#0066FF,#7C3AED);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);overflow-x:hidden!important;line-height:1.6;width:100%;position:relative}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
canvas{display:block}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}
::selection{background:var(--primary);color:#fff}

/* ===========================
   LOADER
=========================== */
.qn-loader{
  position:fixed;inset:0;z-index:99999;
  background:#0a0c14;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.qn-loader.done{opacity:0;visibility:hidden;pointer-events:none}

.loader-inner{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  animation:loaderIn .4s ease both;
}
@keyframes loaderIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Logo lockup: small icon + text side by side */
.loader-brand{
  display:flex;align-items:center;gap:12px;
}
.loader-brand-img{
  width:40px;height:40px;
  object-fit:contain;
  flex-shrink:0;
}
.loader-brand-text{
  display:flex;flex-direction:column;line-height:1.15;
}
.loader-brand-name{
  font-family:'Manrope',sans-serif;
  font-size:1.2rem;font-weight:700;
  color:#fff;letter-spacing:-.02em;
}
.loader-brand-name strong{color:var(--primary)}
.loader-brand-sub{
  font-family:'Manrope',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:2px;
  /* Gradient text matching the logo accent */
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent1) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Progress bar */
.loader-bar{
  width:200px;height:3px;
  background:rgba(255,255,255,.08);
  border-radius:99px;overflow:hidden;
}
.loader-progress{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--primary),var(--accent1));
  border-radius:99px;
  will-change:width;
}

/* ===========================
   CURSOR
=========================== */
.qn-cursor,.qn-cursor-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;mix-blend-mode:screen;transition:opacity .3s}
.qn-cursor{width:34px;height:34px;border:2px solid rgba(0,102,255,0.5);transform:translate(-50%,-50%);transition:transform .15s ease,width .2s,height .2s,border-color .2s}
.qn-cursor-dot{width:5px;height:5px;background:var(--primary);transform:translate(-50%,-50%)}
.qn-cursor.hover{width:56px;height:56px;border-color:var(--accent2);background:rgba(6,182,212,0.08)}

/* ===========================
   NAVBAR
=========================== */
.qn-header{position:fixed;top:0;left:0;right:0;z-index:1100;height:var(--nav-h);background:rgba(10,12,20,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:all .4s var(--transition)}
.qn-header.scrolled{background:rgba(10,12,20,0.98);box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.qn-nav{width:100%;max-width:1280px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}
.nav-right-group{display:flex;align-items:center;gap:24px;flex-shrink:0}

/* Logo */
.qn-logo{display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none}
.logo-text{font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap;font-size:1.15rem}
.logo-accent{color:var(--primary)}
.logo-sub{
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
  vertical-align:baseline;
}

/* Mobile slider overlay */
.qn-nav-links{
  display:flex;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
  z-index:1001;background:none;
}
.qn-nav-links a{
  padding:8px 14px;border-radius:8px;
  font-size:.88rem;font-weight:500;
  color:var(--text-muted);transition:all .3s var(--transition);
  position:relative;display:block;white-space:nowrap;
}
.qn-nav-links a:hover,.qn-nav-links a.active{color:var(--text)}
.qn-nav-links a.active::after{
  content:'';position:absolute;bottom:4px;left:50%;
  transform:translateX(-50%);width:20px;height:2px;
  background:var(--primary);border-radius:1px;
}
/* OPEN STATE — mobile full-screen menu */
.qn-nav-links.open{
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  top:var(--nav-h) !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  width:100vw !important;
  height:calc(100vh - var(--nav-h)) !important;
  background:#0a0c14 !important;
  border-top:1px solid rgba(0,102,255,.2) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  z-index:9900 !important;
  overflow-y:auto !important;
  padding:24px 20px !important;
  list-style:none !important;
  margin:0 !important;
}
.qn-nav-links.open li{
  display:block !important;
  width:100% !important;
  max-width:340px !important;
  text-align:center !important;
  visibility:visible !important;
  opacity:1 !important;
}
.qn-nav-links.open li a,.qn-nav-links.open > li > a{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#ffffff !important;
  font-size:1.15rem !important;
  font-weight:600 !important;
  font-family:'Manrope',sans-serif !important;
  padding:14px 24px !important;
  border-radius:8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  text-decoration:none !important;
  transition:background .2s !important;
  background:transparent;
}
.qn-nav-links.open li a:hover,
.qn-nav-links.open li a.active{
  background:rgba(0,102,255,.15) !important;
  color:#93c5fd !important;
}
.qn-nav-links.open .mobile-nav-cta{
  display:block !important;
  margin-top:16px !important;
}
.qn-nav-links.open .mobile-nav-cta a{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;
  border-radius:50px !important;
  padding:12px 32px !important;
  color:#fff !important;
  display:inline-block !important;
  border-bottom:none !important;
}

/* Language Switcher — native GTranslate select */
.qn-lang-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1200;
}
.qn-lang-globe {
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}
/* Style the GTranslate-rendered select */
#qn-gt-widget select,
#qn-gt-widget .gt-current-lang,
.qn-lang-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0,102,255,0.08) !important;
  border: 1px solid rgba(0,102,255,0.25) !important;
  border-radius: 50px !important;
  color: var(--text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  padding: 7px 32px 7px 14px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all .3s var(--transition) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238899bb' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  min-width: 70px !important;
  max-width: 140px !important;
}
#qn-gt-widget select:hover,
.qn-lang-wrap select:hover {
  border-color: rgba(0,102,255,0.5) !important;
  color: var(--text) !important;
  background-color: rgba(0,102,255,0.13) !important;
}
#qn-gt-widget select option {
  background: #0a0c14 !important;
  color: #e8ecff !important;
  font-size: .82rem !important;
}
/* Hide GTranslate's own branding/flag images if any */
#qn-gt-widget .gt-lang-code { display: none !important; }
#qn-gt-widget img { display: none !important; }
/* Hide the Google Translate bar that appears at top */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }


/* CTA + Hamburger */
.nav-cta{margin-left:8px}
.mobile-nav-cta{display:none}
.qn-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.qn-hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:all .3s var(--transition)}
.qn-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.qn-hamburger.open span:nth-child(2){opacity:0}
.qn-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===========================
   BUTTONS
=========================== */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;transition:all .3s var(--transition);box-shadow:0 4px 20px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,0.15);border:none;cursor:pointer}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 32px rgba(0,102,255,0.4)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;background:transparent;color:var(--text);font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;border:1px solid var(--border-light);transition:all .3s var(--transition)}
.btn-ghost:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.25);transform:translateY(-2px)}
.btn-primary-light{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;background:#fff;color:#0a0c14;font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;border:none;cursor:pointer;transition:all .3s var(--transition)}
.btn-primary-light:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.btn-ghost-light{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;background:transparent;color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:1rem;border:1.5px solid rgba(255,255,255,0.4);transition:all .3s var(--transition)}
.btn-ghost-light:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}

/* ===========================
   CONTAINER & TYPOGRAPHY
=========================== */
.container{max-width:1280px;margin:0 auto;padding:0 24px;width:100%}
.section-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:50px;border:1px solid var(--border-light);color:var(--primary);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,102,255,0.08)}
.section-title{font-family:'Manrope',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-top:16px}
.section-desc{color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin-top:16px;max-width:560px}
.section-header{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:56px}
.section-header.center{align-items:center;text-align:center}
.section-header.center .section-desc{margin-left:auto;margin-right:auto}
.gradient-text{background:linear-gradient(135deg,#0066FF,#06B6D4,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-light{background:linear-gradient(135deg,#a8d8ff,#ffffff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* REVEAL */
.reveal{opacity:1;transform:translateY(0);transition:opacity .8s var(--transition),transform .8s var(--transition)}
.reveal.pre-reveal{opacity:0;transform:translateY(36px)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .9s cubic-bezier(0.22,1,0.36,1) both;animation-delay:.1s}

/* ===========================
   HERO
=========================== */
.hero-section{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:var(--nav-h)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.6}
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:3;flex:1;max-width:620px;padding:80px 0 80px 80px}
.hero-visual{position:relative;z-index:3;flex:1;display:flex;justify-content:center;align-items:center;padding:80px 60px 80px 0}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:50px;background:rgba(0,102,255,.1);border:1px solid rgba(0,102,255,.25);color:var(--text-muted);font-size:.8rem;font-weight:500;margin-bottom:28px}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:pulse-dot 2s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}
.hero-title{font-family:'Manrope',sans-serif;font-size:clamp(2.8rem,5.5vw,4.2rem);font-weight:900;line-height:1.1;letter-spacing:-.04em;margin-bottom:24px}
.hero-subtitle{color:var(--text-muted);font-size:1.1rem;line-height:1.7;margin-bottom:36px;max-width:480px}
.hero-actions{display:flex;align-items:center;gap:16px;margin-bottom:52px;flex-wrap:wrap}
.hero-stats{display:flex;align-items:center;gap:0}
.stat-item{display:flex;flex-direction:column;padding:0 28px}
.stat-item:first-child{padding-left:0}
.stat-num{font-family:'Manrope',sans-serif;font-size:2.2rem;font-weight:900;color:var(--text);line-height:1}
.stat-num+span{font-size:2.2rem;font-weight:900;color:var(--primary)}
.stat-label{color:var(--text-dim);font-size:.8rem;font-weight:500;margin-top:4px}
.stat-divider{width:1px;height:40px;background:var(--border-light)}
/* Hero image */
.hero-3d-wrapper{position:relative;width:500px;height:500px}
.hero-globe-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 60px rgba(0,102,255,.45));animation:float-globe 4s ease-in-out infinite}
@keyframes float-globe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(2deg)}}
.floating-card{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:rgba(15,18,32,.85);backdrop-filter:blur(16px);border:1px solid var(--border-light);font-size:.85rem;font-weight:600;white-space:nowrap;animation:float-card 3s ease-in-out infinite}
.card-1{top:10%;left:-20px;animation-delay:0s}
.card-2{bottom:20%;right:-20px;animation-delay:1s}
.card-3{bottom:5%;left:5%;animation-delay:2s}
.floating-card .card-icon{font-size:1.2rem}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-dim);font-size:.75rem;font-weight:500;letter-spacing:.1em;z-index:3}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--primary),transparent);animation:scroll-pulse 2s ease infinite}
@keyframes scroll-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===========================
   MARQUEE
=========================== */
.marquee-section{padding:20px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-1)}
.marquee-track{overflow:hidden}
.marquee-inner{display:flex;align-items:center;gap:0;animation:marquee 30s linear infinite;width:max-content}
.marquee-inner span{padding:12px 24px;color:var(--text-dim);font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.marquee-inner .sep{color:var(--primary);padding:0 8px;font-size:.6rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===========================
   SERVICES
=========================== */
.services-section{padding:120px 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{position:relative;padding:36px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--border);overflow:hidden;transition:all .4s var(--transition);cursor:pointer}
.service-card:hover{transform:translateY(-8px);border-color:rgba(0,102,255,.3);box-shadow:0 24px 48px rgba(0,0,0,.5)}
.service-card:hover .service-glow{opacity:1}
.service-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(0,102,255,.08),transparent 70%);opacity:0;transition:opacity .4s}
.service-icon-wrap{margin-bottom:24px}
.service-icon-3d{width:80px;height:80px;border-radius:16px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:2rem}
.service-icon-3d svg{width:36px;height:36px}
.service-content h3{font-family:'Manrope',sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:12px;line-height:1.3}
.service-content p{color:var(--text-muted);font-size:.9rem;line-height:1.65}
.service-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--primary);font-size:.85rem;font-weight:600;transition:gap .3s}
.service-link:hover{gap:10px}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.service-tag{font-size:.75rem;font-weight:500;color:var(--accent2);padding:4px 10px;border-radius:50px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2)}

/* ===========================
   STRATEGY / WHY US
=========================== */
.strategy-section{padding:120px 0;background:var(--surface-1)}
.strategy-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.strategy-img-wrap{position:relative;border-radius:var(--radius-xl);overflow:hidden}
.strategy-img{width:100%;border-radius:var(--radius-xl);filter:drop-shadow(0 0 40px rgba(0,102,255,.2))}
.strategy-overlay-card{position:absolute;bottom:28px;left:28px;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:rgba(10,12,20,.9);backdrop-filter:blur(16px);border:1px solid var(--border-light)}
.oc-icon{font-size:2rem}
.oc-text{display:flex;flex-direction:column}
.oc-text strong{font-size:.95rem;font-family:'Manrope',sans-serif;font-weight:700}
.oc-text span{font-size:.8rem;color:var(--text-muted)}
.strategy-orbit{position:absolute;inset:0;pointer-events:none}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,102,255,.15)}
.ring-1{inset:-20px;animation:rotate-ring 12s linear infinite}
.ring-2{inset:-40px;animation:rotate-ring 20s linear infinite reverse}
@keyframes rotate-ring{to{transform:rotate(360deg)}}
.strategy-content .section-title{margin-bottom:20px}
.strategy-features{display:flex;flex-direction:column;gap:24px;margin:32px 0}
.sf-item{display:flex;align-items:flex-start;gap:20px}
.sf-icon{width:48px;height:48px;border-radius:12px;background:rgba(0,102,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;border:1px solid rgba(0,102,255,.2)}
.sf-text{display:flex;flex-direction:column;gap:4px}
.sf-text strong{font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem}
.sf-text span{color:var(--text-muted);font-size:.88rem;line-height:1.6}

/* ===========================
   RESULTS / COUNTERS
=========================== */
.results-section{padding:120px 0;position:relative;overflow:hidden;background:var(--surface-2)}
.results-bg-canvas{position:absolute;inset:0;opacity:.4}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}
.result-card{padding:36px 28px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--border);text-align:center;transition:all .4s var(--transition)}
.result-card:hover{transform:translateY(-8px);border-color:rgba(0,102,255,.3)}
.result-icon{font-size:2.5rem;margin-bottom:16px;display:block}
.result-num-wrap{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:8px}
.result-num{font-family:'Manrope',sans-serif;font-size:2.8rem;font-weight:900;color:var(--primary)}
.result-suffix{font-family:'Manrope',sans-serif;font-size:1.6rem;font-weight:700;color:var(--primary)}
.result-label{color:var(--text-muted);font-size:.85rem;font-weight:500;display:block;margin-bottom:20px}
.result-bar{height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.result-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent2));width:var(--fill,0%);border-radius:2px;transition:width 1.5s var(--transition)}

/* ===========================
   PROCESS
=========================== */
.process-section{padding:120px 0}
.process-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:24px}
.process-line{position:absolute;top:36px;left:calc(12.5% + 12px);right:calc(12.5% + 12px);height:2px;background:linear-gradient(90deg,var(--primary),var(--accent1),var(--accent2),var(--accent3));z-index:0;border-radius:1px}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1}
.step-number{width:72px;height:72px;border-radius:50%;background:var(--surface-2);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-size:1.1rem;font-weight:800;color:var(--primary);margin-bottom:24px;position:relative;z-index:2;box-shadow:0 0 0 6px var(--surface),0 0 24px var(--primary-glow)}
.step-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;transition:all .3s var(--transition);width:100%}
.step-card:hover{border-color:rgba(0,102,255,.3);transform:translateY(-4px)}
.step-icon{font-size:2rem;margin-bottom:12px;display:block}
.step-card h3{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;margin-bottom:8px}
.step-card p{color:var(--text-muted);font-size:.85rem;line-height:1.6}

/* ===========================
   TESTIMONIALS
=========================== */
.testimonials-section{padding:120px 0;background:var(--surface-1);position:relative;overflow:hidden}
.testimonials-section::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(0,102,255,.05),transparent 70%);pointer-events:none;z-index:0}
.testimonials-slider-wrap{overflow:hidden;border-radius:var(--radius-xl);position:relative}
.testimonials-track{display:flex;transition:transform .55s cubic-bezier(0.23,1,0.32,1);will-change:transform}
.testimonial-card{flex:0 0 100%;width:100%;padding:48px;border-radius:var(--radius-xl);background:var(--surface-2);border:1px solid var(--border);box-sizing:border-box;position:relative;overflow:hidden}
.testimonial-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient);opacity:0;transition:opacity .4s}
.testimonial-card.is-active::before{opacity:1}
.testi-quote-icon{font-size:4rem;line-height:1;color:var(--primary);opacity:.18;margin-bottom:-20px;font-family:Georgia,serif;user-select:none}
.testi-stars{color:var(--accent3);font-size:1.1rem;letter-spacing:3px;margin-bottom:20px}
.testi-quote{font-family:'Manrope',sans-serif;font-size:1.1rem;line-height:1.75;color:var(--text);font-style:italic;margin-bottom:32px;max-width:820px}
.testi-author{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.testi-avatar{width:52px;height:52px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0;box-shadow:0 0 18px rgba(0,102,255,.35)}
.testi-info{display:flex;flex-direction:column;flex:1}
.testi-info strong{font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem}
.testi-info span{color:var(--text-muted);font-size:.85rem;margin-top:2px}
.testi-read-more{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:50px;background:rgba(0,102,255,.1);border:1px solid rgba(0,102,255,.25);color:var(--primary);font-size:.8rem;font-weight:600;transition:all .3s;white-space:nowrap;margin-left:auto}
.testi-read-more:hover{background:var(--primary);color:#fff;transform:translateX(3px)}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:36px}
.slider-btn{width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-light);color:var(--text);font-size:1.5rem;cursor:pointer;transition:all .3s var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.slider-btn:hover{background:var(--primary);border-color:var(--primary);box-shadow:0 4px 16px rgba(0,102,255,.35);transform:scale(1.08)}
.slider-btn:active{transform:scale(.96)}
.slider-dots{display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--surface-3);border:none;cursor:pointer;transition:all .35s var(--transition);padding:0;flex-shrink:0}
.dot.active{background:var(--primary);width:28px;border-radius:4px;box-shadow:0 0 8px rgba(0,102,255,.5)}
.dot:hover:not(.active){background:var(--text-dim);transform:scale(1.3)}
.slider-cta{display:flex;justify-content:center;margin-top:28px}
.slider-cta-link{color:var(--primary);font-size:.9rem;font-weight:600;letter-spacing:.03em;border-bottom:1px solid rgba(0,102,255,.35);padding-bottom:2px;transition:border-color .3s,color .3s}
.slider-cta-link:hover{color:var(--accent2);border-color:var(--accent2)}

/* ===========================
   CTA SECTION
=========================== */
.cta-section{padding:120px 0;position:relative;overflow:hidden;background:linear-gradient(135deg,#030518,#0a0828,#020210)}
.cta-bg-canvas{position:absolute;inset:0;opacity:.5}
.cta-content{position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto}
.cta-content .section-tag.light{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
.cta-title{font-family:'Manrope',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.15;letter-spacing:-.03em;margin:16px 0 20px;color:#fff}
.cta-content p{color:rgba(255,255,255,.65);font-size:1.05rem;margin-bottom:36px}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* ===========================
   PAGE HERO (inner pages)
=========================== */
.page-hero{padding:calc(var(--nav-h) + 60px) 0 60px;position:relative;overflow:hidden;text-align:center;background:var(--surface-1);min-height:auto}
.page-hero-3d{position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:0}
.page-hero-content{position:relative;z-index:2}
.page-hero-title{font-family:'Manrope',sans-serif;font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:900;line-height:1.1;letter-spacing:-.04em;margin:16px 0 20px}
.page-hero-content p{color:var(--text-muted);font-size:1.05rem;max-width:540px;margin:0 auto}

/* ===========================
   CONTACT FORM
=========================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.contact-info h3{font-family:'Manrope',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:16px}
.contact-info p{color:var(--text-muted);line-height:1.7;margin-bottom:32px}
.contact-items{display:flex;flex-direction:column;gap:16px}
.contact-item{display:flex;align-items:flex-start;gap:16px;padding:20px;border-radius:var(--radius);background:var(--surface-1);border:1px solid var(--border);transition:all .3s var(--transition)}
.contact-item:hover{border-color:rgba(0,102,255,.3);background:rgba(0,102,255,.04)}
.contact-item-icon{width:42px;height:42px;border-radius:10px;background:rgba(0,102,255,.1);border:1px solid rgba(0,102,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-item-icon svg{width:20px;height:20px;color:var(--primary)}
.contact-item-label{font-size:.78rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.contact-item-val{font-size:.95rem;color:var(--text);font-weight:500}
.contact-form-card{padding:48px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl)}
.qn-form .form-group{margin-bottom:20px}
.qn-form label{display:block;font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:8px}
.qn-form input,.qn-form textarea,.qn-form select{width:100%;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem;transition:all .3s var(--transition)}
.qn-form input:focus,.qn-form textarea:focus,.qn-form select:focus{outline:none;border-color:var(--primary);background:rgba(0,102,255,.04);box-shadow:0 0 0 3px var(--primary-glow)}
.qn-form textarea{min-height:140px;resize:vertical}
.qn-form select option{background:var(--surface-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-msg{padding:12px 16px;border-radius:var(--radius);font-size:.9rem;margin-top:16px;display:none}
.form-msg.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#34d399}
.form-msg.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171}
.btn-submit{width:100%;justify-content:center;border-radius:50px}

/* ===========================
   ABOUT PAGE
=========================== */
.counters-section{padding:80px 0}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.counter-card{padding:40px 32px;text-align:center;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .4s var(--transition)}
.counter-card:hover{transform:translateY(-8px);border-color:rgba(0,102,255,.3)}
.counter-val{font-family:'Manrope',sans-serif;font-size:3rem;font-weight:900;color:var(--primary);line-height:1}
.counter-label{font-size:.9rem;color:var(--text-muted);margin-top:8px}
.mission-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.mission-visual img{width:100%;border-radius:var(--radius-xl);filter:drop-shadow(0 0 40px rgba(0,102,255,.2))}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:48px}
.value-card{padding:36px;text-align:center;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .4s var(--transition)}
.value-card:hover{transform:translateY(-8px);border-color:rgba(0,102,255,.3)}
.value-emoji{font-size:2.5rem;margin-bottom:16px}
.value-card h3{font-family:'Manrope',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:10px}
.value-card p{font-size:.9rem;color:var(--text-muted);line-height:1.7}

/* ===========================
   BLOG
=========================== */
.blog-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px;margin-top:24px}
.blog-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-1);border:1px solid var(--border);transition:all .4s var(--transition)}
.blog-card:hover{transform:translateY(-8px);border-color:rgba(0,102,255,.3);box-shadow:var(--shadow)}
.blog-img{position:relative;overflow:hidden}
.blog-img-inner{width:100%;height:200px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;transition:transform .5s ease}
.blog-card:hover .blog-img-inner{transform:scale(1.05)}
.blog-featured .blog-img-inner{height:320px}
.blog-img-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,20,.8) 0%,transparent 60%)}
.blog-body{padding:24px;border-top:1px solid var(--border)}
.blog-cat-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:10px}
.blog-title{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:12px;transition:color .3s}
.blog-featured .blog-title{font-size:1.4rem}
.blog-card:hover .blog-title{color:var(--primary)}
.blog-date{font-size:.8rem;color:var(--text-dim)}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.blog-cat-btn{padding:7px 16px;border-radius:50px;font-size:.82rem;font-weight:600;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .3s var(--transition);font-family:'Inter',sans-serif}
.blog-cat-btn:hover,.blog-cat-btn.active{border-color:var(--primary);color:var(--primary);background:rgba(0,102,255,.08)}

/* ===========================
   FOOTER
=========================== */
.qn-footer{padding:80px 0 0;background:var(--surface-1);border-top:1px solid var(--border);position:relative}
.footer-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.8fr;gap:48px;padding-bottom:60px}
.footer-brand .qn-logo{margin-bottom:16px}
.footer-brand p{font-size:.9rem;color:var(--text-muted);line-height:1.7;max-width:280px;margin-top:16px}
.footer-socials{display:flex;gap:10px;margin-top:24px}
.social-link{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1rem;font-weight:700;transition:all .3s var(--transition);text-decoration:none}
.social-link:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,102,255,.1);box-shadow:0 0 16px rgba(0,102,255,.25);transform:translateY(-2px)}
.footer-col h4{font-family:'Manrope',sans-serif;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text);margin-bottom:20px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:.9rem;color:var(--text-muted);transition:color .3s,padding-left .3s}
.footer-col a:hover{color:var(--primary);padding-left:4px}
.footer-col.newsletter h4{margin-bottom:10px}
.footer-col.newsletter p{font-size:.88rem;color:var(--text-muted);line-height:1.6;margin-bottom:20px}
.newsletter-form{display:flex;gap:8px}
.newsletter-form input{flex:1;padding:11px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:50px;color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;transition:border-color .3s}
.newsletter-form input:focus{outline:none;border-color:var(--primary)}
.newsletter-msg{font-size:.83rem;margin-top:10px;color:var(--accent4);display:none}
.footer-contact li{color:var(--text-muted);font-size:.88rem;padding:4px 0}
.footer-bottom{border-top:1px solid var(--border);padding:24px 0;display:flex;align-items:center;justify-content:space-between}
.footer-bottom span,.footer-bottom p{font-size:.85rem;color:var(--text-dim)}
.footer-legal{display:flex;gap:24px}
.footer-legal a{font-size:.85rem;color:var(--text-dim);transition:color .3s}
.footer-legal a:hover{color:var(--primary)}

/* ===========================
   FAQ
=========================== */
.faq-item{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.faq-item:hover{border-color:rgba(0,102,255,.3)}
.faq-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:transparent;border:none;color:var(--text);font-size:1rem;font-weight:600;font-family:'Manrope',sans-serif;cursor:pointer;text-align:left;gap:16px}
.faq-icon{flex-shrink:0;transition:transform .3s ease;font-size:1.3rem;color:var(--primary);font-weight:300}
.faq-icon.rotated{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 28px}
.faq-answer.open{max-height:200px}
.faq-answer p{color:var(--text-muted);line-height:1.7;padding-bottom:22px}

/* ===========================
   BLOG DETAIL CONTENT
=========================== */
.blog-content{color:#c8cfe8!important;font-size:1.02rem;line-height:1.9;background:transparent!important}
.blog-content *{color:inherit}
.blog-content h1,.blog-content h2{font-family:'Manrope',sans-serif;font-weight:800;color:#fff!important;line-height:1.3;margin:36px 0 16px}
.blog-content h1{font-size:1.8rem}
.blog-content h2{font-size:1.4rem;border-bottom:1px solid rgba(0,102,255,.2);padding-bottom:10px}
.blog-content h3{font-family:'Manrope',sans-serif;font-size:1.15rem;font-weight:700;color:#60a5fa!important;margin:28px 0 12px}
.blog-content h4{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;color:#e8ecff!important;margin:22px 0 10px}
.blog-content h5,.blog-content h6{font-family:'Manrope',sans-serif;font-weight:700;color:#d8e0f0!important;margin:18px 0 8px}
.blog-content p{margin-bottom:20px;color:#b8c5e0!important;font-size:1rem;line-height:1.85}
.blog-content ul,.blog-content ol{padding-left:28px;margin-bottom:20px}
.blog-content li{margin-bottom:10px;color:#b8c5e0!important;line-height:1.75}
.blog-content span{color:inherit!important}
.blog-content a{color:#60a5fa!important;text-decoration:underline;text-underline-offset:3px}
.blog-content a:hover{color:#93c5fd!important}
.blog-content strong,.blog-content b{color:#fff!important;font-weight:700}
.blog-content em,.blog-content i{color:#c8cfe8!important}
.blog-content blockquote{border-left:3px solid var(--primary);padding:18px 24px;margin:28px 0;background:rgba(0,102,255,.08);border-radius:0 6px 6px 0;font-style:italic;color:#d4daf0!important}
.blog-content blockquote *{color:#d4daf0!important}
.blog-content code{background:rgba(0,102,255,.12)!important;color:#93c5fd!important;padding:2px 8px;border-radius:4px;font-size:.88em;font-family:'Courier New',monospace}
.blog-content pre{background:#0d1117!important;border:1px solid rgba(0,102,255,.2);border-radius:6px;padding:24px;overflow-x:auto;margin:24px 0;color:#94a3b8!important}
.blog-content pre code{background:none!important;color:#94a3b8!important;padding:0}
.blog-content img{border-radius:6px;margin:28px 0;width:100%;height:auto}
.blog-content hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:32px 0}
/* Kill any inline style color set to dark by WP/Elementor */
.blog-content [style*="color:#0"],[style*="color: #0"]{color:#b8c5e0!important}
.blog-content [style*="color:black"],[style*="color: black"]{color:#b8c5e0!important}
.blog-content [style*="color:rgb(0"]{color:#b8c5e0!important}
/* Elementor widget text overrides */
.blog-content .elementor-widget-text-editor{color:#b8c5e0!important}
.blog-content .elementor-widget-text-editor *{color:inherit!important}


/* ===========================
   BLOG ARTICLE PAGE (page.php)
=========================== */
.blog-article{min-height:100vh;padding-top:var(--nav-h)}
.blog-article-hero{position:relative;height:340px;overflow:hidden}
.blog-article-hero-img{width:100%;height:100%;object-fit:cover;display:block}
.blog-article-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,12,20,.3),rgba(10,12,20,.85))}
.blog-article-hero-meta{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:100%;max-width:760px;padding:0 24px}
.blog-back-link{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.85rem;font-weight:600;transition:color .3s}
.blog-back-link:hover{color:#fff}
.blog-article-body{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.blog-article-header{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.blog-article-title{font-family:'Manrope',sans-serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;line-height:1.2;letter-spacing:-.03em;color:#fff;margin:14px 0 24px}
.blog-article-byline{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.blog-byline-author{display:flex;align-items:center;gap:12px}
.blog-byline-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent1));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0}
.blog-byline-name{font-weight:600;font-size:.9rem;color:#e8ecff}
.blog-byline-date{font-size:.78rem;color:#6b7894;margin-top:2px}
.blog-byline-read{font-size:.78rem;color:#6b7894;white-space:nowrap}
/* ===========================
   BLOG ARTICLE PAGE (page.php)
=========================== */
.blog-article{
  min-height:100vh;
  padding-top:var(--nav-h);
  background:var(--surface);
}

/* Full-width hero image */
.blog-article-hero{
  position:relative;
  height:360px;
  overflow:hidden;
  width:100%;
}
.blog-article-hero-img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.75);
}
.blog-article-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,12,20,.1) 0%,rgba(10,12,20,.9) 100%);
}
.blog-article-hero-meta{
  position:absolute;bottom:28px;left:0;right:0;
  padding:0 20px;
  max-width:900px;
  margin:0 auto;
}
.blog-back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.85);font-size:.82rem;font-weight:600;
  text-decoration:none;transition:color .3s;
  background:rgba(0,0,0,.3);padding:6px 14px;border-radius:50px;
  backdrop-filter:blur(8px);
}
.blog-back-link:hover{color:#fff}

/* Article body */
.blog-article-body{
  max-width:820px;
  margin:0 auto;
  padding:40px 20px 80px;
}

/* Header / title block */
.blog-article-header{
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.blog-article-title{
  font-family:'Manrope',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.5rem);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.03em;
  color:#fff;
  margin:14px 0 20px;
}
.blog-article-byline{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.blog-byline-author{
  display:flex;align-items:center;gap:10px;
}
.blog-byline-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent1));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0;
}
.blog-byline-name{font-weight:600;font-size:.88rem;color:#e8ecff}
.blog-byline-date{font-size:.76rem;color:#6b7894;margin-top:2px}
.blog-byline-read{font-size:.76rem;color:#6b7894;white-space:nowrap}

/* Article content area */
.blog-article-content{margin-bottom:40px}
.blog-article-cta{margin-top:40px}

/* Mobile overrides (inside article) */
@media(max-width:768px){
  .blog-article-hero{height:200px}
  .blog-article-body{padding:24px 16px 56px}
  .blog-article-title{font-size:1.4rem;letter-spacing:-.02em}
  .blog-article-byline{flex-direction:column;align-items:flex-start;gap:8px}
  .blog-back-link{font-size:.76rem;padding:5px 12px}
}
@media(max-width:480px){
  .blog-article-hero{height:150px}
  .blog-article-body{padding:18px 12px 48px}
  .blog-article-title{font-size:1.2rem}
}

/* ===========================
   IMAGE SPRITE HELPER CLASSES
   (background-image sprite technique)
=========================== */
/* Service icons sprite: 3 cols x 3 rows, use on 72x72 containers */
.svc-icon{
  display:block;
  width:72px;height:72px;
  border-radius:10px;
  background-image:url('../images/service-icons.png');
  background-size:216px 216px;
  background-repeat:no-repeat;
  flex-shrink:0;
}
.svc-icon-seo    {background-position:0 0}
.svc-icon-ppc    {background-position:-72px 0}
.svc-icon-social {background-position:-144px 0}
.svc-icon-content{background-position:0 -72px}
.svc-icon-email  {background-position:-72px -72px}
.svc-icon-brand  {background-position:-144px -72px}
/* Values cards (same sprite, smaller) */
.val-icon{
  display:block;
  width:56px;height:56px;
  border-radius:8px;
  background-image:url('../images/service-icons.png');
  background-size:168px 168px;
  background-repeat:no-repeat;
  margin:0 auto 16px;
}
.val-icon-0{background-position:0 0}
.val-icon-1{background-position:-56px 0}
.val-icon-2{background-position:-112px 0}
.val-icon-3{background-position:0 -56px}
/* Team photo sprite: 2 cols x 2 rows, use on 100x100 circle containers */
.team-photo{
  display:block;
  width:100px;height:100px;
  border-radius:50%;
  background-image:url('../images/team-photos.png');
  background-size:200px 200px;
  background-repeat:no-repeat;
}
.team-photo-0{background-position:0 0}
.team-photo-1{background-position:-100px 0}
.team-photo-2{background-position:0 -100px}
.team-photo-3{background-position:-100px -100px}
/* Blog thumbnails sprite: 2 cols x 3 rows */
.blog-thumb{
  display:block;
  width:100%;height:180px;
  background-image:url('../images/blog-thumbs.png');
  background-size:200% 300%;
  background-repeat:no-repeat;
}
.blog-thumb-0{background-position:0% 0%}
.blog-thumb-1{background-position:100% 0%}
.blog-thumb-2{background-position:0% 50%}
.blog-thumb-3{background-position:100% 50%}
.blog-thumb-4{background-position:0% 100%}
.blog-thumb-5{background-position:100% 100%}


/* ===========================
   INNER PAGE SHARED STYLES
   (About / Services / Blogs)
=========================== */
.section{padding:80px 0}
.section.no-top{padding-top:0}
.text-center{text-align:center}

/* Hero glow blobs */
.hero-glow-1{position:absolute;top:0;left:50%;transform:translateX(-50%);width:700px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,102,255,.1),transparent 65%);pointer-events:none;z-index:0}

/* Section badge (alias for section-tag) */
.section-badge,.section-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:50px;border:1px solid var(--border-light);color:var(--primary);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,102,255,.08);margin-bottom:12px}

/* Section subtitle (alias for section-desc) */
.section-subtitle,.section-desc{color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin-top:16px;max-width:560px}
.text-center .section-subtitle,.text-center .section-desc{margin-left:auto;margin-right:auto}

/* Glass card */
.glass-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .4s var(--transition)}
.glass-card:hover{border-color:rgba(0,102,255,.3);transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.35)}

/* Counter card paddings */
.counter-card{padding:36px 24px;text-align:center}

/* Services inner page icon */
.service-icon{width:72px;height:72px;border-radius:var(--radius);background:rgba(0,102,255,.1);border:1px solid rgba(0,102,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:2rem}
.service-icon svg{width:30px;height:30px;stroke:var(--primary)}
.service-title{font-family:'Manrope',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:12px}
.service-desc{color:var(--text-muted);font-size:.92rem;line-height:1.65;margin-bottom:16px}
/* Ensure emoji icons render large in 3d icon box */
.service-icon-3d{font-size:2.4rem!important;line-height:1}

/* CTA box (inner pages) */
.qn-cta{padding:80px 0}
.cta-box{padding:60px 48px;border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(0,102,255,.1),rgba(124,58,237,.07));border:1px solid rgba(0,102,255,.2);text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient)}
.cta-title{font-family:'Manrope',sans-serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;line-height:1.2;letter-spacing:-.03em;margin:12px 0 16px}
.cta-subtitle{color:var(--text-muted);font-size:1rem;line-height:1.7;margin-bottom:32px;max-width:560px;display:block;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* Btn aliases — used by inner pages */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;transition:all .3s var(--transition);cursor:pointer;border:none;text-decoration:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;transition:all .3s var(--transition);cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--border-light)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.btn.btn-primary,.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 20px var(--primary-glow);border:none;cursor:pointer;transition:all .3s var(--transition)}
.btn.btn-primary:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,102,255,.4)}
.btn.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-light)}
.btn.btn-outline:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.btn.btn-sm{padding:8px 18px;font-size:.85rem}
.btn.btn-lg{padding:16px 36px;font-size:1rem}

/* Blog featured layout */
.blog-cat{font-size:.75rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.blog-featured.blog-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
.blog-featured .blog-img{height:100%}
.blog-featured .blog-img > div{height:100%!important;min-height:280px}
.blog-featured .blog-body{border-top:none;border-left:1px solid var(--border)}
@media(max-width:768px){.blog-featured.blog-card{grid-template-columns:1fr}.blog-featured .blog-body{border-left:none;border-top:1px solid var(--border)}}

/* ===========================
   RESPONSIVE — TABLET (≤1024px)
=========================== */
@media(max-width:1024px){
  .hero-content{padding:80px 0 80px 32px}
  .hero-visual{padding:80px 20px 80px 0}
  .hero-3d-wrapper{width:360px;height:360px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .counters-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .strategy-layout{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr}
  .mission-layout{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-featured{grid-column:span 2}
  .process-timeline{grid-template-columns:repeat(2,1fr);gap:24px}
  .process-line{display:none}
  .testimonials-track{gap:20px}
}

/* ===========================
   RESPONSIVE — MOBILE (≤768px)
=========================== */
@media(max-width:768px){

  /* Global: prevent horizontal overflow */
  html,body{overflow-x:hidden;max-width:100vw}
  .container{padding-left:18px!important;padding-right:18px!important;max-width:100%!important;box-sizing:border-box}
  *{min-width:0;box-sizing:border-box}
  img{max-width:100%;height:auto}

  /* Navbar */
  .qn-nav{padding:0 16px}
  .qn-nav-links:not(.open),.nav-cta{display:none!important}
  .qn-hamburger{display:flex!important}
  .nav-right-group{gap:8px;flex-shrink:0}
  .lang-label{display:none}
  .qn-logo{gap:6px}
  .logo-text{font-size:1rem!important}
  .logo-sub{font-size:1rem!important;opacity:1}
  #qn-gt-widget select{max-width:100px!important;font-size:.75rem!important;padding:6px 22px 6px 10px!important}

  /* Mobile nav open state */
  .qn-nav-links.open{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    top:var(--nav-h)!important;left:0!important;right:0!important;bottom:0!important;
    width:100vw!important;height:calc(100vh - var(--nav-h))!important;
    background:#0a0c14!important;
    border-top:2px solid rgba(0,102,255,.25)!important;
    align-items:center!important;justify-content:center!important;
    gap:0!important;z-index:9999!important;overflow-y:auto!important;
    padding:24px 20px!important;
    margin:0!important;list-style:none!important;
  }
  .qn-nav-links.open > li{
    display:block!important;
    width:100%!important;max-width:340px!important;
    text-align:center!important;
    margin:0!important;
  }
  .qn-nav-links.open > li > a{
    display:block!important;
    visibility:visible!important;opacity:1!important;
    font-size:1.2rem!important;
    font-weight:700!important;
    color:#fff!important;
    padding:15px 20px!important;
    border-radius:8px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    text-decoration:none!important;
    background:transparent!important;
    font-family:'Manrope',sans-serif!important;
  }
  .qn-nav-links.open > li > a:hover,
  .qn-nav-links.open > li > a.active{
    background:rgba(0,102,255,.15)!important;
    color:#60a5fa!important;
  }
  .mobile-nav-cta{display:block!important;margin-top:16px!important}
  .mobile-nav-cta > a{
    display:inline-block!important;
    background:var(--primary)!important;
    color:#fff!important;
    padding:12px 32px!important;
    border-radius:50px!important;
    font-weight:700!important;
    border-bottom:none!important;
  }

  /* Buttons */
  .btn-primary,.btn-ghost,.btn-primary-light,.btn-ghost-light{padding:11px 22px;font-size:.9rem;border-radius:50px}

  /* HERO */
  .hero-section{flex-direction:column;min-height:auto;padding-top:0;padding-bottom:40px;overflow:hidden}
  .hero-content{padding:calc(var(--nav-h) + 28px) 18px 28px;text-align:center;width:100%}
  .hero-title{font-size:clamp(1.9rem,7vw,2.5rem)!important;line-height:1.2!important;letter-spacing:-.02em!important}
  .hero-subtitle{font-size:.9rem!important;line-height:1.7!important;max-width:100%!important;margin:12px auto 18px!important}
  .hero-actions{flex-direction:column;align-items:center;gap:10px;width:100%}
  .hero-actions a{width:100%;max-width:280px;text-align:center;justify-content:center;display:flex!important}
  .hero-visual{display:none!important}
  .hero-scroll-hint{display:none}
  .hero-stats{display:flex;gap:0;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;padding:14px 0 0}
  .stat-item{flex:1;padding:0;text-align:center}
  .stat-divider{width:1px;height:32px;background:rgba(255,255,255,.12);flex-shrink:0}
  .stat-num{font-size:1.45rem!important;font-weight:800!important;line-height:1.1!important;display:block}
  .stat-label{font-size:.65rem!important;white-space:nowrap;display:block;margin-top:2px}

  /* Marquee */
  .marquee-section{padding:10px 0}
  .marquee-inner span{font-size:.78rem!important;padding:0 8px}

  /* Section headers */
  .section-header{text-align:center}
  .section-title{font-size:clamp(1.45rem,6vw,1.9rem)!important;line-height:1.25!important}
  .section-desc{font-size:.88rem!important;margin-top:10px!important;line-height:1.65!important}
  .section-tag{font-size:.72rem!important;padding:5px 12px!important}
  .gradient-text{display:inline}

  /* Services */
  .services-section{padding:48px 0}
  .services-grid{display:flex!important;flex-direction:column!important;gap:14px!important}
  .service-card{padding:18px 16px!important;border-radius:10px!important}
  .service-card h3{font-size:.98rem!important;margin-bottom:6px!important}
  .service-card p{font-size:.85rem!important;line-height:1.6!important;margin-bottom:10px!important}
  .service-icon-wrap{margin-bottom:10px}
  .service-icon-3d{width:50px!important;height:50px!important;font-size:1.5rem!important;border-radius:8px!important}
  .service-tags{gap:5px!important;flex-wrap:wrap!important;margin-bottom:8px!important}
  .service-tag{font-size:.7rem!important;padding:3px 8px!important}
  .svc-icon{width:50px!important;height:50px!important}

  /* Strategy */
  .strategy-section{padding:48px 0}
  .strategy-layout{grid-template-columns:1fr!important;gap:28px!important}
  .strategy-visual{display:none}
  .strategy-content{padding:0!important}
  .sf-item{gap:10px!important;margin-bottom:14px!important}
  .sf-icon{font-size:1.3rem!important;padding:9px!important;min-width:40px!important;height:40px!important;border-radius:8px!important}
  .sf-text strong{font-size:.9rem!important}
  .sf-text span{font-size:.82rem!important;line-height:1.55!important}

  /* Results */
  .results-section{padding:48px 0}
  .results-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .result-card{padding:18px 12px!important;border-radius:10px!important}
  .result-icon{font-size:1.5rem!important}
  .result-num{font-size:1.7rem!important;font-weight:800!important}
  .result-suffix{font-size:1rem!important}
  .result-label{font-size:.76rem!important;text-align:center;line-height:1.4!important}

  /* Process */
  .process-section{padding:48px 0}
  .process-timeline{display:flex!important;flex-direction:column!important;gap:14px!important}
  .process-line{display:none!important}
  .process-step{flex-direction:row!important;align-items:flex-start!important;gap:12px!important}
  .step-number{font-size:.82rem!important;min-width:34px!important;height:34px!important;border-radius:50%!important;flex-shrink:0!important;display:flex;align-items:center;justify-content:center}
  .step-card{padding:14px 12px!important;border-radius:10px!important;flex:1}
  .step-icon{font-size:1.2rem!important;margin-bottom:6px!important}
  .step-card h3{font-size:.9rem!important;margin-bottom:4px!important}
  .step-card p{font-size:.82rem!important;line-height:1.55!important}

  /* Testimonials */
  .testimonials-section{padding:48px 0}
  .testimonials-slider-wrap{overflow:hidden}
  .testimonials-track{gap:14px}
  .testimonial-card{padding:22px 16px!important;border-radius:10px!important;min-width:calc(100vw - 36px)!important;max-width:calc(100vw - 36px)!important}
  .testi-quote{font-size:.84rem!important;line-height:1.65!important}
  .testi-author{flex-wrap:wrap;gap:8px}
  .testi-read-more{font-size:.76rem!important;padding:5px 10px!important}
  .testi-quote-icon{font-size:2rem!important}
  .slider-controls{margin-top:14px}
  .slider-btn{width:36px!important;height:36px!important;font-size:1.2rem!important}

  /* CTA */
  .cta-section{padding:48px 0}
  .cta-content{padding:32px 16px!important;border-radius:10px!important}
  .cta-title{font-size:clamp(1.4rem,5.5vw,1.9rem)!important;line-height:1.2!important}
  .cta-content p{font-size:.86rem!important;margin-bottom:18px!important}
  .cta-actions{flex-direction:column!important;align-items:center!important;gap:10px!important;width:100%}
  .cta-actions a{width:100%;max-width:280px;text-align:center;justify-content:center;display:flex!important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .footer-brand{max-width:100%!important}
  .footer-bottom{flex-direction:column!important;gap:8px!important;text-align:center!important;padding-top:18px!important}
  .footer-links-col h4{font-size:.88rem!important;margin-bottom:8px!important}
  .footer-links-col a{font-size:.82rem!important;padding:3px 0!important}

  /* Inner page glass cards */
  .section{padding:48px 0!important}
  .glass-card{padding:18px 14px!important;border-radius:8px!important}
  .glass-card h2{font-size:1.15rem!important;margin-bottom:8px!important}
  .glass-card h3{font-size:.98rem!important;margin-bottom:6px!important}
  .glass-card p{font-size:.84rem!important;line-height:1.65!important}
  .val-icon,.team-photo{width:50px!important;height:50px!important}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(auto"]{grid-template-columns:1fr!important}

  /* Inner page CTA box */
  .cta-box{padding:24px 16px!important;border-radius:10px!important}
  .cta-box h2,.cta-box h3{font-size:1.3rem!important}
  .cta-actions .btn-primary,.cta-actions .btn-ghost{text-align:center!important;justify-content:center!important;display:flex!important}

  /* Contact / Forms */
  .contact-form-card{padding:22px 14px!important;border-radius:10px!important}
  .form-row{grid-template-columns:1fr!important;gap:12px!important}
  .form-group input,.form-group textarea,.form-group select{font-size:.88rem!important;padding:11px 12px!important}

  /* Blog listing page */
  .blog-featured.blog-card{grid-template-columns:1fr!important}
  .blog-featured .blog-body{border-left:none!important;border-top:1px solid var(--border)!important}
  .blog-card{border-radius:10px!important}
  .blog-body{padding:14px!important}
  .blog-title{font-size:.92rem!important}
  .blog-thumb{height:150px!important}

  /* Blog article inner page */
  .blog-article-hero{height:170px!important}
  .blog-article-body{padding:20px 16px 52px!important}
  .blog-article-title{font-size:1.25rem!important;line-height:1.3!important}
  .blog-article-byline{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
  .blog-article-content{max-width:100%!important}
  .blog-article-cta{margin-top:28px!important}
  .blog-content p{font-size:.88rem!important;line-height:1.75!important}
  .blog-content h2{font-size:1.15rem!important}
  .blog-content h3{font-size:.98rem!important}
  .blog-byline-avatar{width:34px!important;height:34px!important;font-size:.82rem!important}
  .blog-back-link{font-size:.78rem!important}

  /* Counters */
  .counters-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .counter-card{padding:18px 12px!important;border-radius:10px!important}
  .counter-card h3{font-size:1.5rem!important}
  .counter-card p{font-size:.78rem!important}

  /* Misc */
  .qn-cursor,.qn-cursor-dot{display:none}
  section[style*="padding:80px 0"]{padding:48px 0!important}
  section[style*="padding:60px 0"]{padding:36px 0!important}
}

/* ===========================
   RESPONSIVE — SMALL MOBILE (≤480px)
=========================== */
@media(max-width:480px){

  html,body{overflow-x:hidden}
  .container{padding-left:12px!important;padding-right:12px!important}

  /* Nav */
  .logo-text{font-size:.88rem!important}
  .logo-sub{font-size:.88rem!important;font-weight:800!important;color:#fff!important;opacity:1!important}
  #qn-gt-widget select{max-width:80px!important;font-size:.68rem!important;padding:5px 16px 5px 7px!important}

  /* Hero */
  .hero-content{padding-top:calc(var(--nav-h) + 16px)!important;padding-left:12px!important;padding-right:12px!important}
  .hero-title{font-size:clamp(1.55rem,8vw,2rem)!important}
  .hero-subtitle{font-size:.84rem!important}
  .stat-num{font-size:1.25rem!important}
  .stat-label{font-size:.6rem!important}

  /* Section text */
  .section-title{font-size:clamp(1.25rem,6vw,1.65rem)!important}
  .section-desc{font-size:.82rem!important}

  /* Results single col */
  .results-grid{grid-template-columns:1fr!important;gap:10px!important}

  /* Cards */
  .glass-card{padding:14px 10px!important}
  .service-card{padding:14px 12px!important}
  .result-card{padding:14px 10px!important}
  .step-card{padding:12px 10px!important}
  .testimonial-card{padding:18px 12px!important;min-width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}

  /* Buttons */
  .btn-primary,.btn-ghost,.btn-primary-light,.btn-ghost-light{padding:10px 16px!important;font-size:.82rem!important}

  /* Footer */
  .footer-grid{gap:18px!important}
  .footer-bottom{font-size:.75rem!important}

  /* Blog article */
  .blog-article-hero{height:130px!important}
  .blog-article-title{font-size:1.1rem!important}
  .blog-article-body{padding:14px 10px 44px!important}
  .blog-content p{font-size:.84rem!important}
  .blog-content h2{font-size:1.05rem!important}
  .blog-content h3{font-size:.92rem!important}

  /* Inner CTA */
  .cta-box{padding:18px 10px!important}
  .cta-box h2,.cta-box h3{font-size:1.1rem!important}
  section[style*="padding:80px 0"]{padding:36px 0!important}
  section[style*="padding:60px 0"]{padding:28px 0!important}
}

/* ===========================
   GTRANSLATE — show native select, hide banner only
=========================== */
.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt{display:none!important}
body{top:0!important}
body.translated-ltr,body.translated-rtl{margin-top:0!important}
#qn-gt-widget select{display:block!important}

/* ===========================
   YOUTUBE VIDEO SECTION
=========================== */
.video-section{padding:80px 0;position:relative}
.video-wrapper{margin-top:40px}
.video-frame-outer{position:relative;max-width:900px;margin:0 auto}
.video-frame-inner{
  position:relative;width:100%;padding-top:56.25%;/* 16:9 */
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(0,102,255,.25);
  box-shadow:0 24px 80px rgba(0,102,255,.18),0 8px 32px rgba(0,0,0,.5);
}
.video-frame-inner iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border:none;border-radius:16px;
}
.video-glow{
  position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,102,255,.12),transparent,rgba(124,58,237,.08));
  z-index:1;
}
.video-stats{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin-top:32px;flex-wrap:wrap;
}
.vstat{display:flex;flex-direction:column;align-items:center;padding:0 24px;text-align:center}
.vstat-num{font-family:'Manrope',sans-serif;font-size:1.8rem;font-weight:900;color:#fff;line-height:1.1;background:linear-gradient(135deg,var(--primary),var(--accent1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vstat-label{font-size:.78rem;font-weight:600;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.vstat-div{width:1px;height:40px;background:rgba(255,255,255,.1);flex-shrink:0}
@media(max-width:768px){
  .video-section{padding:48px 0}
  .video-frame-inner{border-radius:10px}
  .vstat-num{font-size:1.4rem}
  .vstat{padding:0 14px}
  .video-stats{gap:4px;margin-top:20px}
}

/* ===========================
   SOCIAL LINK (SVG icons)
=========================== */
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text-muted);
  transition:all .3s var(--transition);
}
.social-link:hover{
  background:rgba(0,102,255,.18);
  border-color:rgba(0,102,255,.4);
  color:#fff;
  transform:translateY(-2px);
}
.social-link svg{display:block;flex-shrink:0}

/* ===========================
   YOUTUBE LITE EMBED
=========================== */
.yt-lite{
  position:relative;
  width:100%;padding-top:56.25%;
  background:#0d1117;
  border-radius:16px;overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(0,102,255,.2);
  box-shadow:0 24px 80px rgba(0,102,255,.15),0 8px 32px rgba(0,0,0,.5);
}
.yt-lite-thumb{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease,filter .4s ease;
  filter:brightness(.7);
}
.yt-lite:hover .yt-lite-thumb{transform:scale(1.03);filter:brightness(.55)}
.yt-lite-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,12,20,.7) 0%,rgba(10,12,20,.1) 60%,transparent 100%);
}
.yt-play-btn{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:none;border:none;cursor:pointer;
  transition:transform .25s ease,filter .25s ease;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));
  padding:0;
}
.yt-lite:hover .yt-play-btn{transform:translate(-50%,-50%) scale(1.12)}
.yt-play-btn svg path:first-child{transition:fill .2s}
.yt-lite:hover .yt-play-btn svg path:first-child{fill:#cc0000}
.yt-title{
  position:absolute;bottom:18px;left:20px;right:20px;
  color:rgba(255,255,255,.85);font-size:.85rem;font-weight:600;
  font-family:'Manrope',sans-serif;letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
/* After click: show iframe */
.yt-lite.playing{padding-top:56.25%}
.yt-lite.playing > *:not(iframe){display:none}
.yt-lite iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;border:none;
}
@media(max-width:768px){
  .yt-lite{border-radius:10px}
  .yt-title{font-size:.78rem;bottom:12px;left:14px}
}