/* ============================================
   APEX SOFTECH — style.css
   Premium Animated Design | Mobile Friendly
============================================ */

:root {
  --cyan: #00f7ff;
  --blue: #0077ff;
  --purple: #6200ff;
  --green: #00ff88;
  --dark: #050816;
  --dark2: #080f22;
  --dark3: #0b1530;
  --glass: rgba(255,255,255,0.03);
  --glass-b: rgba(0,247,255,0.12);
  --text: rgba(255,255,255,0.9);
  --muted: #8aa8c4;
  --radius: 20px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* ===== CANVAS BG ===== */
#bgCanvas {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* ===== UNIQUE BACKGROUND: Animated Aurora Mesh ===== */
.bg-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(0,247,255,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(98,0,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 10%, rgba(0,119,255,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(0,255,136,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 40%, rgba(0,247,255,0.04) 0%, transparent 40%);
  animation: auroraPulse 12s ease-in-out infinite alternate;
}
@keyframes auroraPulse {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(20deg) brightness(1.08); }
  100% { filter: hue-rotate(-15deg) brightness(0.95); }
}

.bg-mesh::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}

body::before {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60vh;
  z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,247,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,247,255,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg) scaleX(2.5);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  animation: gridMove 6s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 60px; }
}

body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 90px,
      rgba(0,247,255,0.010) 90px,
      rgba(0,247,255,0.010) 91px
    );
}

/* ===== HEX GRID OVERLAY ===== */
.hex-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; opacity: 0.35;
}
.hex-cell {
  position: absolute;
  width: 60px; height: 60px;
  border: 1px solid rgba(0,247,255,0.055);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation: hexPulse 7s ease-in-out infinite;
}
@keyframes hexPulse {
  0%,100% { opacity:0.25; transform:scale(1); }
  50%      { opacity:0.75; transform:scale(1.06); }
}

/* ===== PARTICLES ===== */
.particles-wrap { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pt { position:absolute; border-radius:50%; animation: ptFloat linear infinite; }
@keyframes ptFloat {
  0%   { transform:translateY(100vh) scale(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:0.4; }
  100% { transform:translateY(-120px) scale(1.2); opacity:0; }
}

/* ===== CUSTOM CURSOR ===== */
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 2px solid rgba(0,247,255,0.65);
  border-radius: 50%; z-index: 99999;
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, background 0.2s;
  mix-blend-mode: screen;
}
.cursor-dot {
  position: fixed; width: 6px; height: 6px;
  background: var(--cyan); border-radius: 50%;
  z-index: 99999; pointer-events: none;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 14px var(--cyan), 0 0 28px rgba(0,247,255,0.4);
}

/* ===== HEADER ===== */
header {
  position: fixed; top:0; width:100%; z-index: 1000;
  background: rgba(5,8,22,0.55);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(0,247,255,0.1);
  transition: background 0.35s, box-shadow 0.35s;
}
header.scrolled {
  background: rgba(5,8,22,0.96);
  box-shadow: 0 4px 40px rgba(0,247,255,0.06);
}







.navbar {
  width: 90%; margin: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.logo img { width: 140px; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(0,247,255,0.3)); }
.logo-text { font-family:'Orbitron',sans-serif; font-size:20px; font-weight:900; color:var(--cyan); letter-spacing:2px; }
.logo-text small { display:block; font-size:11px; font-family:'Syne',sans-serif; color:var(--muted); font-weight:300; letter-spacing:3px; }
.nav-links { display:flex; list-style:none; gap:26px; }
.nav-links a {
  color: rgba(255,255,255,0.7); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:0.5px;
  transition: color 0.3s; position:relative; padding-bottom:4px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background: var(--cyan); border-radius:2px;
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 22px; border-radius:50px;
  background: linear-gradient(45deg, var(--cyan), var(--blue));
  color: #000; font-weight:700; font-size:13px;
  text-decoration:none; transition:0.3s;
  box-shadow: 0 0 22px rgba(0,247,255,0.25);
}
.nav-cta:hover { transform:translateY(-2px); box-shadow: 0 0 40px rgba(0,247,255,0.5); }
.menu-btn { display:none; font-size:24px; cursor:pointer; color:var(--cyan); background:none; border:none; }

/* ===== SECTION COMMON ===== */
section { position:relative; z-index:1; }
.section { padding: 110px 8%; }
.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-tag {
  display:inline-block;
  background:rgba(0,247,255,0.07); border:1px solid rgba(0,247,255,0.2);
  color:var(--cyan); font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:6px 16px; border-radius:50px; margin-bottom:16px;
}
.section-title { text-align:center; margin-bottom:70px; }
.section-title h2 { font-family:'Orbitron',sans-serif; font-size:38px; font-weight:700; margin-bottom:12px; line-height:1.2; }
.section-title p { color:var(--muted); font-size:15px; max-width:560px; margin:0 auto; line-height:1.8; }

/* ===== BUTTONS ===== */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:50px; text-decoration:none;
  background: linear-gradient(45deg, var(--cyan), var(--blue));
  color:#000; font-weight:700; font-size:14px;
  box-shadow:0 0 24px rgba(0,247,255,0.25); transition:0.3s;
  border:none; cursor:pointer; font-family:'Syne',sans-serif;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 0 44px rgba(0,247,255,0.55); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:50px; text-decoration:none;
  border:2px solid var(--cyan); color:var(--cyan);
  font-weight:700; font-size:14px; transition:0.3s; font-family:'Syne',sans-serif;
}
.btn-outline:hover { background:var(--cyan); color:#000; transform:translateY(-3px); }
.sm-btn { padding:10px 22px; font-size:13px; margin-top:24px; }
.full-btn { width:100%; justify-content:center; border-radius:14px; padding:16px; font-size:15px; }

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display:flex; align-items:center; justify-content:space-between;
  gap:60px; padding:140px 8% 100px;
  position:relative; overflow:hidden;
}
.hero-content { flex:1.1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,247,255,0.07); border:1px solid rgba(0,247,255,0.2);
  color:var(--cyan); font-size:12px; padding:8px 16px;
  border-radius:50px; margin-bottom:22px; letter-spacing:0.5px;
}
.badge-dot {
  width:8px; height:8px; border-radius:50%; background:#00ff88;
  animation: badgePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px #00ff88;
}
@keyframes badgePulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);} }
.hero-content h1 {
  font-family:'Orbitron',sans-serif; font-size:54px; line-height:1.12;
  font-weight:900; margin-bottom:22px;
  text-shadow: 0 0 60px rgba(0,247,255,0.15);
}
.hero-content > p { color:var(--muted); font-size:16px; line-height:1.9; max-width:520px; margin-bottom:28px; }
.hero-stats-row {
  display:flex; align-items:center;
  background: rgba(255,255,255,0.03); border:1px solid rgba(0,247,255,0.12);
  border-radius:16px; padding:18px 24px; width:fit-content; margin-bottom:34px;
  backdrop-filter: blur(10px);
}
.hs { text-align:center; padding:0 20px; }
.hs-num { font-family:'Orbitron',sans-serif; font-size:24px; font-weight:900; color:var(--cyan); display:block; }
.hs small { display:block; font-size:11px; color:var(--muted); letter-spacing:1px; margin-top:3px; }
.hs-div { width:1px; height:44px; background:rgba(0,247,255,0.15); }
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.hero-visual { flex:0.9; display:flex; justify-content:center; }

/* Hero card */
.hero-card-3d {
  width:100%; max-width:420px; position:relative;
  animation: cardFloat 4.5s ease-in-out infinite;
}
@keyframes cardFloat { 0%,100%{transform:translateY(0) rotate(-0.5deg);}50%{transform:translateY(-16px) rotate(0.5deg);} }
.hc-glow {
  position:absolute; inset:-3px; border-radius:30px;
  background:linear-gradient(135deg,rgba(0,247,255,0.4),rgba(98,0,255,0.25),transparent 65%);
  z-index:0; filter:blur(2px); animation: hcGlowPulse 3s ease-in-out infinite alternate;
}
@keyframes hcGlowPulse { 0%{opacity:0.7;}100%{opacity:1;} }
.hc-inner {
  position:relative; z-index:1;
  background:rgba(8,15,34,0.88); border:1px solid rgba(0,247,255,0.18);
  border-radius:26px; padding:28px; backdrop-filter:blur(24px);
  box-shadow: 0 0 80px rgba(0,247,255,0.12), 0 0 120px rgba(98,0,255,0.07);
}
.hc-header { display:flex; align-items:center; gap:7px; margin-bottom:18px; }
.hc-dot { width:10px; height:10px; border-radius:50%; }
.hc-dot.red{background:#ff5f56;} .hc-dot.yellow{background:#ffbd2e;} .hc-dot.green{background:#27c93f;}
.hc-title { font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; color:var(--cyan); margin-bottom:18px; letter-spacing:1px; }
.hc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.hcs {
  background:rgba(0,247,255,0.05); border:1px solid rgba(0,247,255,0.1);
  border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:0.3s;
}
.hcs:hover { background:rgba(0,247,255,0.1); transform:translateY(-2px); }
.hcs .ti { font-size:20px; color:var(--cyan); }
.hcs strong { font-size:15px; font-weight:700; }
.hcs small { font-size:10px; color:var(--muted); }
.hc-bar-wrap { margin-bottom:18px; }
.hc-bar-label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:6px; }
.hc-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.hc-bar-fill { height:100%; border-radius:3px; animation: barGrow 2s ease forwards; }
@keyframes barGrow { from{width:0!important;} }
.hc-pulse {
  text-align:center; font-size:12px; color:#00ff88;
  background:rgba(0,255,136,0.07); border:1px solid rgba(0,255,136,0.18);
  border-radius:50px; padding:9px 14px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.pulse-dot { width:7px; height:7px; border-radius:50%; background:#00ff88; animation:badgePulse 1.2s ease-in-out infinite; box-shadow:0 0 8px #00ff88; }

/* ===== TICKER ===== */
.ticker-wrap {
  position:relative; z-index:1; overflow:hidden;
  background:rgba(0,247,255,0.04);
  border-top:1px solid rgba(0,247,255,0.1); border-bottom:1px solid rgba(0,247,255,0.1);
  padding:14px 0;
}
.ticker-inner {
  display:flex; gap:55px; white-space:nowrap;
  animation: tickerAnim 30s linear infinite;
}
.ticker-inner span { font-size:13px; color:var(--cyan); font-weight:600; letter-spacing:1px; flex-shrink:0; }
@keyframes tickerAnim { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }

/* ===== ALT ROWS (Services) ===== */
.alt-row {
  display:flex; align-items:center; gap:80px;
  margin-bottom:100px; position:relative;
}
.alt-row.reverse { flex-direction:row-reverse; }
.alt-row:last-child { margin-bottom:0; }
.alt-content { flex:1; }
.alt-image { flex:1; }
.alt-tag {
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--cyan); margin-bottom:14px; display:block;
}
.alt-content h3 { font-family:'Orbitron',sans-serif; font-size:30px; font-weight:700; line-height:1.25; margin-bottom:16px; }
.alt-content > p { color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:22px; }
.alt-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.alt-list li { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,0.82); }
.alt-list li .ti { color:var(--green); font-size:16px; flex-shrink:0; }

/* Image glow wrap */
.img-glow-wrap { position:relative; border-radius:24px; overflow:hidden; }
.img-glow-wrap::before {
  content:''; position:absolute; inset:-1px; z-index:0;
  background:linear-gradient(135deg,rgba(0,247,255,0.32),rgba(98,0,255,0.22),transparent 60%);
  border-radius:25px;
}
.img-glow-wrap img { width:100%; display:block; border-radius:22px; position:relative; z-index:1; transition:transform 0.5s ease; }
.img-glow-wrap:hover img { transform:scale(1.04); }
.img-badge {
  position:absolute; bottom:20px; right:20px; z-index:2;
  background:rgba(5,8,22,0.88); backdrop-filter:blur(12px);
  border:1px solid rgba(0,247,255,0.22); color:var(--cyan);
  padding:8px 16px; border-radius:12px; font-size:12px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.img-badge .ti { font-size:16px; }

/* ===== ABOUT ===== */
.about-section { padding:110px 8%; background:linear-gradient(180deg,transparent,rgba(0,119,255,0.025),transparent); }
.about-row { display:flex; align-items:center; gap:80px; }
.about-img-col { flex:1; position:relative; }
.about-glow { animation: imgFloat 4.5s ease-in-out infinite; }
@keyframes imgFloat { 0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);} }
.about-floating-card {
  position:absolute; bottom:-20px; right:-20px; z-index:3;
  background:rgba(8,15,34,0.92); backdrop-filter:blur(18px);
  border:1px solid rgba(0,247,255,0.22); border-radius:16px;
  padding:16px 20px; display:flex; align-items:center; gap:12px;
  box-shadow:0 0 35px rgba(0,247,255,0.12);
}
.about-floating-card .ti { font-size:28px; color:var(--cyan); }
.about-floating-card strong { display:block; font-size:14px; }
.about-floating-card small { font-size:11px; color:var(--muted); }
.about-text-col { flex:1; }
.about-text-col h2 { font-family:'Orbitron',sans-serif; font-size:34px; font-weight:700; line-height:1.2; margin:14px 0 20px; }
.about-text-col > p { color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:14px; }
.about-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.about-card {
  background:var(--glass); border:1px solid var(--glass-b);
  border-radius:18px; padding:22px; transition:0.35s;
}
.about-card:hover { transform:translateY(-6px); border-color:rgba(0,247,255,0.4); background:rgba(0,247,255,0.05); box-shadow:0 10px 40px rgba(0,247,255,0.08); }
.about-card .ti { font-size:26px; color:var(--cyan); margin-bottom:10px; display:block; }
.about-card h4 { font-size:14px; font-weight:700; margin-bottom:6px; }
.about-card p { color:var(--muted); font-size:12px; line-height:1.6; }

/* ===== STATS BAND ===== */
.stats-band {
  position:relative; z-index:1; padding:60px 8%;
  background: linear-gradient(135deg,rgba(0,247,255,0.05),rgba(98,0,255,0.05));
  border-top:1px solid rgba(0,247,255,0.1); border-bottom:1px solid rgba(0,247,255,0.1);
}
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-item {
  text-align:center; padding:34px 20px;
  background:var(--glass); border:1px solid var(--glass-b); border-radius:22px; transition:0.35s;
  position:relative; overflow:hidden;
}
.stat-item::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top, rgba(0,247,255,0.06), transparent 70%);
  opacity:0; transition:0.35s;
}
.stat-item:hover::before { opacity:1; }
.stat-item:hover { transform:translateY(-8px) scale(1.02); border-color:rgba(0,247,255,0.4); box-shadow:0 20px 60px rgba(0,247,255,0.1); }
.stat-item .ti { font-size:34px; color:var(--cyan); margin-bottom:12px; display:block; }
.stat-item h2 { font-family:'Orbitron',sans-serif; font-size:42px; font-weight:900; color:var(--cyan); margin-bottom:6px; text-shadow:0 0 24px rgba(0,247,255,0.35); }
.stat-item p { color:var(--muted); font-size:13px; letter-spacing:1px; }

/* ===== WHY CHOOSE US ===== */
.features-section { background:rgba(255,255,255,0.008); }
.why-row { display:flex; align-items:center; gap:80px; }
.why-text { flex:1; }
.why-text h2 { font-family:'Orbitron',sans-serif; font-size:34px; font-weight:700; line-height:1.2; margin:14px 0 18px; }
.why-text > p { color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:28px; }
.why-image { flex:1; }
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feature-card {
  background:var(--glass); border:1px solid var(--glass-b);
  border-left:3px solid var(--cyan); border-radius:12px;
  padding:16px 18px; display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:600; transition:0.3s; cursor:default;
}
.feature-card:hover { background:rgba(0,247,255,0.07); transform:translateX(6px); box-shadow:0 4px 20px rgba(0,247,255,0.08); }
.feature-card .ti { font-size:20px; color:var(--cyan); flex-shrink:0; }

/* ===== PORTFOLIO ===== */
.portfolio-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto; gap:22px;
}
.portfolio-card { position:relative; border-radius:22px; overflow:hidden; cursor:pointer; }
.portfolio-card.large { grid-row:span 2; }
.port-img { width:100%; height:100%; min-height:220px; }
.port-img img { width:100%; height:100%; object-fit:cover; display:block; transition:0.55s; }
.portfolio-card:hover .port-img img { transform:scale(1.09); }
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,8,22,0.96) 0%,rgba(5,8,22,0.3) 60%,transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
  transition:0.3s;
}
.port-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,247,255,0.15); border:1px solid rgba(0,247,255,0.28);
  color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:1px;
  padding:5px 12px; border-radius:50px; margin-bottom:10px; width:fit-content;
}
.port-overlay h3 { font-size:18px; font-weight:700; margin-bottom:6px; }
.port-overlay p { font-size:13px; color:var(--muted); line-height:1.6; }
.portfolio-card.large .port-img { min-height:460px; }

/* ===== TESTIMONIALS ===== */
.testimonials-section { padding-bottom: 0; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom: 40px; }
.t-card {
  background:var(--glass); border:1px solid var(--glass-b);
  border-radius:22px; padding:32px; transition:0.35s; position:relative; overflow:hidden;
}
.t-card::before {
  content:'"'; position:absolute; top:12px; right:22px;
  font-size:90px; font-family:serif; color:rgba(0,247,255,0.07); line-height:1;
  pointer-events:none;
}
.t-card:hover { transform:translateY(-8px); border-color:rgba(0,247,255,0.32); box-shadow:0 20px 60px rgba(0,247,255,0.08); }
.t-stars { font-size:18px; color:#ffd700; letter-spacing:2px; margin-bottom:16px; }
.t-card > p { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:22px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:12px; }
.t-avatar {
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:white; flex-shrink:0;
  text-transform:uppercase;
}
.t-author strong { display:block; font-size:14px; }
.t-author small { font-size:11px; color:var(--muted); }

/* ===== USER REVIEWS SECTION ===== */
.user-reviews-section {
  padding: 50px 0 20px;
}
.user-reviews-header {
  text-align: center;
  margin-bottom: 36px;
}
.user-reviews-header h3 {
  font-family:'Orbitron',sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-top: 10px;
}

/* ===== REVIEW FORM ===== */
.review-form-wrap {
  margin-top: 60px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,247,255,0.14);
  border-radius: 28px;
  padding: 50px 50px;
  backdrop-filter: blur(18px);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.review-form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green));
  border-radius: 28px 28px 0 0;
}

.review-form-header {
  text-align: center;
  margin-bottom: 36px;
}
.review-form-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  margin: 10px 0 10px;
  line-height: 1.2;
}
.review-form-header p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

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

/* Input wrapper for error messages */
.input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.review-form input,
.review-form textarea {
  padding: 14px 18px;
  border: 1.5px solid rgba(0,247,255,0.12);
  border-radius: 14px;
  background: rgba(5,8,22,0.65);
  color: white;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
  width: 100%;
}
.review-form input::placeholder,
.review-form textarea::placeholder {
  color: rgba(255,255,255,0.22);
}
.review-form input:focus,
.review-form textarea:focus {
  border-color: rgba(0,247,255,0.55);
  background: rgba(0,247,255,0.04);
  box-shadow: 0 0 20px rgba(0,247,255,0.08);
}
.review-form input.error,
.review-form textarea.error {
  border-color: rgba(255,80,80,0.7);
  background: rgba(255,50,50,0.04);
}
.review-form textarea {
  min-height: 110px;
  resize: none;
}

/* Error messages */
.input-error {
  display: none;
  font-size: 11px;
  color: #ff6b6b;
  margin-top: 5px;
  padding-left: 4px;
  font-weight: 600;
}
.input-error.show {
  display: block;
}

/* Rating box */
.rating-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,247,255,0.03);
  border: 1.5px solid rgba(0,247,255,0.1);
  border-radius: 14px;
  padding: 18px 20px;
}
.rating-box label {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.rating-required { color: #ff6b6b; margin-left: 3px; }

/* Star rating interactive */
.star-rating {
  display: flex;
  gap: 8px;
}
.star-rating .ti {
  font-size: 32px;
  color: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
}
.star-rating .ti.active {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.star-rating .ti.hovered {
  color: #ffd700;
  transform: scale(1.18);
}
.star-rating .ti:hover {
  transform: scale(1.2);
}

.rating-text {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Char count */
.char-count {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 5px;
}
.char-count.ready {
  color: var(--green);
}

/* Success message */
.review-success {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.28);
  border-radius: 14px;
  padding: 18px 22px;
  animation: successPop 0.4s ease;
}
@keyframes successPop {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.review-success .ti {
  font-size: 32px;
  color: var(--green);
  flex-shrink: 0;
}
.review-success strong {
  display: block;
  font-size: 15px;
  color: var(--green);
  margin-bottom: 3px;
}
.review-success p {
  font-size: 13px;
  color: var(--muted);
}

/* ===== CONTACT ===== */
.contact-section { background:rgba(255,255,255,0.008); }
.contact-row { display:grid; grid-template-columns:1fr 1.55fr; gap:60px; }
.contact-info { display:flex; flex-direction:column; gap:14px; }
.ci-card {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--glass); border:1px solid var(--glass-b);
  border-radius:16px; padding:20px; transition:0.3s;
}
.ci-card:hover { border-color:rgba(0,247,255,0.32); transform:translateX(6px); box-shadow:0 4px 20px rgba(0,247,255,0.07); }
.ci-card .ti { font-size:24px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.ci-card h4 { font-size:11px; color:var(--cyan); letter-spacing:2px; text-transform:uppercase; margin-bottom:5px; }
.ci-card p { color:var(--muted); font-size:14px; line-height:1.6; }
.ci-card a { color:var(--muted); text-decoration:none; transition:0.3s; }
.ci-card a:hover { color:var(--cyan); }
.contact-form-wrap {
  background:var(--glass); border:1px solid var(--glass-b);
  border-radius:24px; padding:38px;
  backdrop-filter: blur(10px);
}
.contact-form-wrap form { display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form-wrap input,
.contact-form-wrap textarea,
.contact-form-wrap select {
  padding:14px 18px; border:1px solid rgba(0,247,255,0.12);
  border-radius:14px; background:rgba(5,8,22,0.6);
  color:white; font-family:'Syne',sans-serif; font-size:14px;
  outline:none; transition:0.3s; appearance:none; width:100%;
}
.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder { color:rgba(255,255,255,0.22); }
.contact-form-wrap select option { background:var(--dark2); color:white; }
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.contact-form-wrap select:focus { border-color:rgba(0,247,255,0.55); background:rgba(0,247,255,0.04); }
.contact-form-wrap textarea { height:145px; resize:none; }

/* ===== FOOTER ===== */
footer { position:relative; z-index:1; padding:80px 8% 30px; border-top:1px solid rgba(0,247,255,0.1); }
.footer-container { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:50px; margin-bottom:50px; }
.footer-logo-wrap img { width:130px; margin-bottom:16px; }
.f-logo-text { font-family:'Orbitron',sans-serif; font-size:18px; font-weight:900; color:var(--cyan); letter-spacing:2px; margin-bottom:16px; }
.f-logo-text span { color:var(--muted); font-size:12px; font-family:'Syne',sans-serif; font-weight:300; display:block; letter-spacing:3px; }
.brand-col > p { color:var(--muted); font-size:13px; line-height:1.8; margin-bottom:20px; }
.footer-socials { display:flex; gap:10px; margin-bottom:10px; }
.footer-socials a {
  width:40px; height:40px; border-radius:12px;
  background:var(--glass); border:1px solid var(--glass-b);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:18px; text-decoration:none; transition:0.3s;
}
.footer-socials a:hover { background:rgba(0,247,255,0.12); border-color:rgba(0,247,255,0.35); color:var(--cyan); transform:translateY(-3px); }
.footer-col h3 { font-size:14px; font-weight:700; margin-bottom:20px; color:white; letter-spacing:1px; text-transform:uppercase; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col ul a {
  color:var(--muted); text-decoration:none; font-size:13px;
  display:flex; align-items:center; gap:6px; transition:0.3s;
}
.footer-col ul a .ti { font-size:13px; color:var(--cyan); }
.footer-col ul a:hover { color:var(--cyan); padding-left:4px; }
.footer-contact-info { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.footer-contact-info p { color:var(--muted); font-size:13px; display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.footer-contact-info .ti { color:var(--cyan); font-size:16px; flex-shrink:0; margin-top:1px; }

/* Newsletter */
.nl-form {
  display:flex; gap:8px;
  border:1px solid rgba(0,247,255,0.15); border-radius:12px;
  overflow:hidden; background:rgba(5,8,22,0.5);
  margin-bottom:8px;
}
.nl-form input {
  flex:1; padding:12px 14px; border:none; background:transparent;
  color:white; font-family:'Syne',sans-serif; font-size:13px; outline:none;
}
.nl-form input::placeholder { color:rgba(255,255,255,0.25); }
.nl-form button {
  padding:10px 14px; background:linear-gradient(45deg,var(--cyan),var(--blue));
  border:none; cursor:pointer; color:#000; font-size:16px; border-radius:0 10px 10px 0;
  transition:0.3s;
}
.nl-form button:hover { opacity:0.85; }
.footer-newsletter small { font-size:11px; color:rgba(255,255,255,0.25); }

.footer-bottom {
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.05);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-bottom p { color:var(--muted); font-size:12px; }
.footer-policy { display:flex; gap:16px; align-items:center; }
.footer-policy a { color:var(--muted); font-size:12px; text-decoration:none; transition:0.3s; }
.footer-policy a:hover { color:var(--cyan); }
.footer-policy span { color:rgba(255,255,255,0.2); }

/* ===== SCROLL REVEAL ===== */
[data-aos] { opacity:0; transform:translateY(32px); transition: opacity 0.75s ease, transform 0.75s ease; }
[data-aos="fade-left"] { transform:translateX(44px); opacity:0; }
[data-aos="fade-right"] { transform:translateX(-44px); opacity:0; }
[data-aos="zoom-in"] { transform:scale(0.88); opacity:0; }
[data-aos].aos-animate { opacity:1 !important; transform:none !important; }

/* ===== MOBILE RESPONSIVE ===== */
@media(max-width:1100px){
  .hero { padding:130px 6% 90px; }
  .footer-container { grid-template-columns:1fr 1fr; gap:36px; }
  .why-row { gap:50px; }
  .about-row { gap:50px; }
  .review-form-wrap { padding:36px 30px; }
}

@media(max-width:900px){
  body { cursor:auto; }
  .cursor-ring, .cursor-dot { display:none; }

  .hero {
    flex-direction:column; text-align:center;
    padding:120px 6% 80px; gap:40px;
  }
  .hero-content h1 { font-size:38px; }
  .hero-content > p { max-width:100%; }
  .hero-stats-row { margin:0 auto 28px; flex-wrap:wrap; justify-content:center; padding:16px; }
  .hs { padding:8px 14px; }
  .hero-buttons { justify-content:center; }
  .hero-visual { width:100%; }
  .hero-card-3d { max-width:380px; }

  .alt-row, .alt-row.reverse { flex-direction:column; gap:40px; }
  .about-row { flex-direction:column; gap:40px; }
  .about-floating-card { bottom:-15px; right:10px; }

  .why-row { flex-direction:column; gap:40px; }
  .why-image { order:-1; }

  .contact-row { grid-template-columns:1fr; gap:30px; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:1fr; gap:18px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-card.large { grid-row:span 1; }
  .portfolio-card.large .port-img { min-height:260px; }
  .section-title h2 { font-size:28px; }
  .alt-content h3 { font-size:24px; }
  .about-text-col h2, .why-text h2 { font-size:28px; }
  .footer-container { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .nav-links {
    position:fixed; top:64px; right:-100%; flex-direction:column;
    background:rgba(5,8,22,0.98); backdrop-filter:blur(24px);
    width:270px; height:calc(100vh - 64px); padding:40px 28px;
    transition:right 0.4s ease; border-left:1px solid rgba(0,247,255,0.1);
    gap:22px; overflow-y:auto; z-index:999;
  }
  .nav-links.active { right:0; }
  .nav-cta { display:none; }
  .menu-btn { display:block; }

  .review-form-wrap { padding:28px 20px; }
  .review-form-header h2 { font-size:22px; }
}

@media(max-width:600px){
  .hero-content h1 { font-size:30px; }
  .hero-card-3d { display:none; }
  .about-cards { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .stat-item h2 { font-size:32px; }
  .section { padding:80px 5%; }
  .about-section { padding:80px 5%; }
  .stats-band { padding:50px 5%; }
  .contact-form-wrap { padding:24px 20px; }
  .alt-row { margin-bottom:70px; }

  .star-rating .ti { font-size:28px; }
}

@media(max-width:400px){
  .hero-content h1 { font-size:26px; }
  .hs-num { font-size:20px; }
  .hero-stats-row { gap:0; }
  .hs-div { display:none; }
}


/* ===== COOKIES POPUP ===== */

.cookie-popup{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:900px;
  background:rgba(10,15,30,0.95);
  border:1px solid rgba(0,247,255,0.15);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:20px 24px;
  z-index:99999;
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
  animation:cookieSlide 0.5s ease;
}

.cookie-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.cookie-text h4{
  color:#fff;
  margin-bottom:6px;
  font-size:18px;
}

.cookie-text p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

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

.cookie-btn{
  padding:10px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:0.3s;
}

.accept-btn{
  background:linear-gradient(135deg,#00f7ff,#0077ff);
  color:#fff;
}

.learn-btn{
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  background:transparent;
}

.cookie-btn:hover{
  transform:translateY(-2px);
}

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

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

@media(max-width:768px){

  .cookie-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .cookie-buttons{
    width:100%;
  }

  .cookie-btn{
    flex:1;
    text-align:center;
  }

}