/* ================================================================
   TEIVORA TECHNOLOGY SOLUTIONS — PREMIUM v3.0
   Inspired by Nethority.com aesthetic
   ================================================================ */



/* ── TOKENS ── */
:root {
  --c-bg:        #ffffff;
  --c-bg2:       #f7f8fc;
  --c-bg3:       #eef0f8;
  --c-dark:      #08090d;
  --c-dark2:     #0e1017;
  --c-dark3:     #161924;
  --c-navy:      #0f1728;
  --c-blue:      #3557ff;
  --c-blue2:     #5b77ff;
  --c-teal:      #00c6be;
  --c-purple:    #7c5cfc;
  --c-green:     #22c55e;
  --c-amber:     #f59e0b;
  --c-text:      #0c0d14;
  --c-text2:     #454860;
  --c-text3:     #8082a0;
  --c-border:    #e3e5f5;
  --c-border2:   #d0d3ee;
  --c-card:      #ffffff;
  --c-white:     #ffffff;

  /* Dark mode overrides */
  --c-bg-d:      #07080f;
  --c-bg2-d:     #0d0e1a;
  --c-bg3-d:     #13142a;
  --c-text-d:    #eeeef5;
  --c-text2-d:   #9294b4;
  --c-border-d:  #1e2035;
  --c-card-d:    #0f1020;

  --f-sans:    'Times New Roman', Times, serif;
  --f-display: 'Times New Roman', Times, serif;
  --nav-h:     76px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(.0,0,.2,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);

  --grd-blue:   linear-gradient(135deg, #3557ff 0%, #5b77ff 100%);
  --grd-hero:   linear-gradient(160deg, #08090d 0%, #0f1728 45%, #0a0e1e 100%);
  --grd-glass:  linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.01) 100%);
  --grd-accent: linear-gradient(135deg, #3557ff 0%, #00c6be 100%);

  --sh-blue:    0 8px 40px rgba(53,87,255,.3);
  --sh-lg:      0 24px 80px rgba(8,9,13,.12);
  --sh-sm:      0 2px 16px rgba(8,9,13,.06);

  --trans: all .3s var(--ease);
}

[data-theme="dark"] {
  --c-bg:     var(--c-bg-d);
  --c-bg2:    var(--c-bg2-d);
  --c-bg3:    var(--c-bg3-d);
  --c-text:   var(--c-text-d);
  --c-text2:  var(--c-text2-d);
  --c-border: var(--c-border-d);
  --c-card:   var(--c-card-d);
  --sh-lg: 0 24px 80px rgba(0,0,0,.5);
  --sh-sm: 0 2px 16px rgba(0,0,0,.3);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family: var(--f-sans);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:var(--f-sans) }
input,textarea,select { font-family:var(--f-sans); outline:none }

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0;
  z-index:99999;
  background: linear-gradient(90deg, var(--c-blue), var(--c-teal), var(--c-purple));
  box-shadow: 0 0 12px rgba(53,87,255,.6);
  transition: width .08s linear;
}

/* ── SPLASH ── */
#splash {
  position:fixed; inset:0;
  z-index:99998;
  background: var(--c-dark);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:32px;
  transition: opacity .8s ease, visibility .8s ease;
}
#splash.out { opacity:0; visibility:hidden; pointer-events:none }

.sp-logo-ring {
  position:relative; width:130px; height:130px;
  display:flex; align-items:center; justify-content:center;
}
.sp-ring {
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid transparent;
}
.sp-ring-1 {
  background: conic-gradient(from 0deg, var(--c-blue), var(--c-teal), var(--c-purple), var(--c-blue)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  animation: spin 3s linear infinite;
}
.sp-ring-2 {
  inset:-12px;
  background: conic-gradient(from 180deg, rgba(53,87,255,.3), transparent 60%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  animation: spin 6s linear infinite reverse;
}
.sp-logo-img {
  width:100px; height:100px; border-radius:20px;
  position:relative; z-index:1;
  box-shadow: 0 0 40px rgba(53,87,255,.5), 0 0 80px rgba(0,198,190,.2);
  animation: floatY 2.5s ease-in-out infinite;
}
.sp-name {
  font-family:var(--f-display); font-size:2.6rem; font-weight:800;
  color:#fff; letter-spacing:.08em;
  animation: fadeUp .6s ease .3s both;
}
.sp-tagline {
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  animation: fadeUp .6s ease .5s both;
}
.sp-bar {
  width:200px; height:2px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden;
  animation: fadeUp .6s ease .6s both;
}
.sp-fill {
  height:100%; width:0;
  background: var(--grd-accent); border-radius:99px;
  animation: loadBar 2.4s cubic-bezier(.4,0,.2,1) .4s forwards;
}

/* ── CURSOR ── */
#cursor-dot {
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:var(--c-blue); pointer-events:none; z-index:9997;
  transform:translate(-50%,-50%);
  transition:width .2s, height .2s, background .2s;
}
#cursor-ring {
  position:fixed; width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(53,87,255,.5); pointer-events:none; z-index:9996;
  transform:translate(-50%,-50%);
  transition:all .15s ease;
}
body.cursor-hover #cursor-dot  { width:14px; height:14px; background:var(--c-teal) }
body.cursor-hover #cursor-ring { width:50px; height:50px; border-color:rgba(0,198,190,.5) }

/* ── NAVBAR ── */
.navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4%;
  transition:all .4s var(--ease);
}
.navbar.solid {
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  height:66px;
}
[data-theme="dark"] .navbar.solid {
  background:rgba(7,8,15,.94);
  border-bottom-color:var(--c-border);
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:13px; flex-shrink:0 }
.logo-img-wrap {
  position:relative; width:48px; height:48px; flex-shrink:0;
}
.logo-img-wrap::before {
  content:'';
  position:absolute; inset:-5px; border-radius:16px;
  background: conic-gradient(from 0deg, var(--c-blue), var(--c-teal), var(--c-purple), var(--c-blue));
  animation: spin 5s linear infinite;
  opacity:.9; z-index:0;
}
.logo-img-wrap::after {
  content:'';
  position:absolute; inset:-10px; border-radius:20px;
  background: radial-gradient(circle, rgba(53,87,255,.35) 0%, transparent 70%);
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index:-1;
}
.logo-img-wrap img {
  width:48px; height:48px; border-radius:12px;
  position:relative; z-index:1;
  transition:transform .5s var(--spring), box-shadow .3s ease;
  background:#fff;
}
.nav-logo:hover .logo-img-wrap img {
  transform: scale(1.12) rotate(-5deg);
  box-shadow: 0 0 30px rgba(53,87,255,.5);
}
.nav-logo:hover .logo-img-wrap::before { animation-duration:1.5s }

.logo-text { display:flex; flex-direction:column; line-height:1.15 }
.logo-name {
  font-family:var(--f-display); font-weight:800; font-size:1.2rem;
  color:#fff; letter-spacing:.04em; transition:color .3s;
}
.navbar.solid .logo-name { color:var(--c-text) }
[data-theme="dark"] .navbar.solid .logo-name { color:#fff }
.logo-sub {
  font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4); transition:color .3s;
}
.navbar.solid .logo-sub { color:var(--c-text3) }
[data-theme="dark"] .navbar.solid .logo-sub { color:rgba(255,255,255,.35) }

/* Desktop nav links */
.nav-links {
  display:flex; align-items:center; gap:4px;
  flex:1; justify-content:center;
}
.nav-links a {
  position:relative; padding:7px 13px; border-radius:9px;
  font-size:.84rem; font-weight:500; white-space:nowrap;
  color:rgba(255,255,255,.75); transition:all .25s ease;
  opacity:0; animation:navIn .4s ease forwards;
}
.nav-links a:nth-child(1){animation-delay:.05s}
.nav-links a:nth-child(2){animation-delay:.1s}
.nav-links a:nth-child(3){animation-delay:.15s}
.nav-links a:nth-child(4){animation-delay:.2s}
.nav-links a:nth-child(5){animation-delay:.25s}
.nav-links a:nth-child(6){animation-delay:.3s}
.nav-links a:nth-child(7){animation-delay:.35s}
.nav-links a:nth-child(8){animation-delay:.4s}
.navbar.solid .nav-links a { color:var(--c-text2) }
[data-theme="dark"] .navbar.solid .nav-links a { color:rgba(255,255,255,.6) }
.nav-links a:hover { color:var(--c-blue); background:rgba(53,87,255,.08) }
.nav-links a.active { color:var(--c-blue); font-weight:600 }
.nav-links a.active::after {
  content:''; position:absolute; bottom:3px; left:50%;
  transform:translateX(-50%); width:14px; height:2px;
  background:var(--c-blue); border-radius:99px;
}

/* Nav CTA */
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.btn-theme {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--trans);
}
.navbar.solid .btn-theme {
  background:var(--c-bg2); border-color:var(--c-border); color:var(--c-text);
}
.btn-theme:hover { transform:rotate(20deg) scale(1.1) }

/* CTA button */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:700; border-radius:10px;
  padding:10px 20px; transition:var(--trans);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn-primary {
  background:var(--c-blue); color:#fff;
  box-shadow: var(--sh-blue);
}
.btn-primary::before {
  content:'';
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-15deg);
  animation:shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer { 0%{left:-100%} 40%,100%{left:160%} }
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 48px rgba(53,87,255,.5);
  background:var(--c-blue2);
}
.btn-outline {
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
}
.btn-outline:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.7);
  transform:translateY(-2px);
}
.navbar.solid .btn-outline { border-color:var(--c-border); color:var(--c-text) }
.navbar.solid .btn-outline:hover { background:var(--c-bg2) }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px; padding:8px;
  border-radius:8px; transition:background .2s;
}
.hamburger span {
  display:block; width:21px; height:2px;
  background:#fff; border-radius:2px; transition:all .3s ease;
}
.navbar.solid .hamburger span { background:var(--c-text) }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile menu */
.mobile-nav {
  display:none; position:fixed;
  top:var(--nav-h); left:0; right:0; bottom:0;
  background:var(--c-bg);
  flex-direction:column; padding:24px 5%;
  z-index:999; overflow-y:auto;
  border-top:1px solid var(--c-border);
}
.mobile-nav.open { display:flex }
.mobile-nav a {
  padding:14px 16px; font-size:1rem; font-weight:600;
  border-radius:10px; color:var(--c-text);
  transition:var(--trans);
  opacity:0; animation:slideIn .3s ease forwards;
}
.mobile-nav a:nth-child(1){animation-delay:.04s}
.mobile-nav a:nth-child(2){animation-delay:.08s}
.mobile-nav a:nth-child(3){animation-delay:.12s}
.mobile-nav a:nth-child(4){animation-delay:.16s}
.mobile-nav a:nth-child(5){animation-delay:.2s}
.mobile-nav a:nth-child(6){animation-delay:.24s}
.mobile-nav a:nth-child(7){animation-delay:.28s}
.mobile-nav a:nth-child(8){animation-delay:.32s}
.mobile-nav a:hover, .mobile-nav a.active { background:rgba(53,87,255,.07); color:var(--c-blue) }
.mobile-nav-foot {
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--c-border);
  display:flex; flex-direction:column; gap:10px;
}
.mobile-nav-cta {
  background:var(--c-blue); color:#fff;
  text-align:center; padding:14px; border-radius:10px;
  font-weight:700; font-size:1rem;
}

/* ── LAYOUT ── */
.wrap { max-width:1300px; margin:0 auto; padding:0 5% }
.section { padding:100px 0; position:relative }
.section-sm { padding:64px 0; position:relative }

.badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-blue); background:rgba(53,87,255,.08);
  padding:6px 14px; border-radius:99px;
  border:1px solid rgba(53,87,255,.18); margin-bottom:16px;
}
.badge-dot {
  width:6px; height:6px; background:var(--c-teal);
  border-radius:50%; animation:blink 1.8s ease-in-out infinite;
  flex-shrink:0;
}

h1.title {
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.8rem, 5vw, 4.2rem);
  line-height:1.1; color:var(--c-text);
}
h2.title {
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2rem, 3.5vw, 3rem);
  line-height:1.15; color:var(--c-text);
}
h3.title {
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem, 2.5vw, 1.9rem);
  line-height:1.2; color:var(--c-text);
}
.title .gr {
  background:var(--grd-accent);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.title .un {
  position:relative; display:inline-block;
}
.title .un::after {
  content:'';
  position:absolute; left:0; bottom:-4px; right:0; height:3px;
  background:var(--grd-accent); border-radius:99px;
}

p.lead {
  font-size:1.08rem; color:var(--c-text2); line-height:1.8; max-width:600px;
}
p.lead + * { margin-top:32px }
.tc { text-align:center }
.tc p.lead { margin-left:auto; margin-right:auto }

/* ── HERO ── */
.hero {
  min-height:100vh;
  background:var(--grd-hero);
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 60px);
  padding-bottom:80px;
  overflow:hidden; position:relative;
}

/* Particle canvas */
#hero-canvas {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
}

/* Animated mesh gradient */
.hero-mesh {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.hero-orb {
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
}
.orb1 { width:600px; height:600px; background:rgba(53,87,255,.22); top:-150px; right:-80px; animation:orbFloat 9s ease-in-out infinite }
.orb2 { width:420px; height:420px; background:rgba(0,198,190,.14); bottom:-100px; left:5%; animation:orbFloat 12s ease-in-out infinite 2s reverse }
.orb3 { width:300px; height:300px; background:rgba(124,92,252,.12); top:40%; left:42%; animation:orbFloat 15s ease-in-out infinite 4s }

/* Grid overlay */
.hero-grid-overlay {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  animation:gridScroll 20s linear infinite;
}

.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}

/* Left */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(53,87,255,.12); border:1px solid rgba(53,87,255,.28);
  padding:8px 18px; border-radius:99px; margin-bottom:28px;
  animation:fadeUp .6s ease .3s both;
}
.hero-eyebrow .dot {
  width:7px; height:7px; background:var(--c-teal); border-radius:50%;
  animation:blink 1.5s ease-in-out infinite; flex-shrink:0;
}
.hero-eyebrow span { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-teal) }
.hero h1 { color:#fff; margin-bottom:24px; animation:fadeUp .6s ease .45s both }
.hero p.lead { color:rgba(255,255,255,.6); animation:fadeUp .6s ease .6s both }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp .6s ease .75s both }
.hero-stats {
  display:flex; gap:40px; margin-top:56px; flex-wrap:wrap;
  animation:fadeUp .6s ease .9s both;
  padding-top:40px; border-top:1px solid rgba(255,255,255,.1);
}
.hero-stat .n {
  font-family:var(--f-display); font-size:2.4rem; font-weight:800; color:#fff; line-height:1;
}
.hero-stat .n em { color:var(--c-teal); font-style:normal }
.hero-stat .l { font-size:.78rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; margin-top:5px }

/* Right — floating card cluster */
.hero-visual { position:relative; animation:fadeRight .7s ease .5s both; z-index:2 }
.hero-card-main {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-xl); padding:36px;
  backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
}
.hero-card-main::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.svc-tile {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:18px 12px; text-align:center;
  transition:var(--trans); cursor:default;
}
.svc-tile:hover {
  background:rgba(53,87,255,.16); border-color:rgba(53,87,255,.35);
  transform:translateY(-5px) scale(1.02);
}
.svc-tile .ic { font-size:1.8rem; margin-bottom:8px }
.svc-tile .lb { font-size:.66rem; color:rgba(255,255,255,.5); font-weight:500; line-height:1.3 }
.hero-card-main {
  max-width: 1000px;
  margin: auto;
  padding: 40px;
  border-radius: 30px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* GRID FIX */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* TILE */
.svc-tile {
  display: flex;
  justify-content: center;
}

/* IMAGE CARD */
.image-card {
  width: 300%;
  height: 100px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.image-card:hover {
  transform: translateY(-8px) scale(1.03);
}

/* DARK OVERLAY */
.image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* LABEL */
.image-card span {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 10px;
}

/* RESPONSIVE FIX */
@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}
/* Flip Card */
.flip-card { perspective:800px; background:transparent !important; border:none !important; padding:0 !important; }
.flip-card:hover { transform:none !important; background:transparent !important; }
.flip-inner {
  position:relative; width:100%; min-height:90px;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.flip-card:hover .flip-inner { transform:rotateY(180deg); }
.flip-front, .flip-back {
  position:absolute; inset:0; border-radius:var(--radius);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 12px; text-align:center;
}
.flip-front {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.flip-back {
  transform:rotateY(180deg);
  background-size:cover; background-position:center;
  overflow:hidden; border:1px solid rgba(53,87,255,.4);
}
.flip-back-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(53,87,255,.7),rgba(0,0,0,.5));
}
.flip-back-label {
  position:relative; z-index:1;
  font-size:.7rem; font-weight:700; color:#fff;
  letter-spacing:.08em; text-transform:uppercase;
}
/* Maintain grid cell height */
.svc-grid .flip-card { height:90px; }

/* Floating badges */
.float-badge {
  position:absolute; background:var(--c-card);
  border:1px solid var(--c-border); border-radius:12px; padding:12px 16px;
  box-shadow:var(--sh-lg); display:flex; align-items:center; gap:10px;
  animation:floatY 4s ease-in-out infinite;
}
[data-theme="dark"] .float-badge { background:var(--c-bg3); border-color:var(--c-border) }
.float-badge.top-left { top:-28px; left:-28px; animation-delay:0s }
.float-badge.bot-right { bottom:-28px; right:-28px; animation-delay:1.5s }
.float-badge .fb-icon { font-size:1.4rem }
.float-badge .fb-text { display:flex; flex-direction:column; line-height:1.3 }
.float-badge .fb-val { font-family:var(--f-display); font-weight:800; font-size:.95rem; color:var(--c-text) }
.float-badge .fb-lbl { font-size:.68rem; color:var(--c-text3) }

/* ── TRUSTED STRIP ── */
.strip {
  padding:48px 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);
  background:var(--c-bg2); overflow:hidden;
}
.strip-label {
  text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-text3); margin-bottom:32px;
}
.strip-track-wrap { position:relative; overflow:hidden }
.strip-track-wrap::before, .strip-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2;
}
.strip-track-wrap::before { left:0; background:linear-gradient(90deg, var(--c-bg2), transparent) }
.strip-track-wrap::after  { right:0; background:linear-gradient(-90deg, var(--c-bg2), transparent) }
.strip-track {
  display:flex; gap:56px; align-items:center;
  animation:scrollLeft 30s linear infinite; width:max-content;
}
.strip-track:hover { animation-play-state:paused }
.strip-item {
  font-family:var(--f-display); font-size:1.05rem; font-weight:700;
  color:var(--c-text3); opacity:.45; white-space:nowrap;
  transition:var(--trans); flex-shrink:0; cursor:default;
}
.strip-item:hover { opacity:1; color:var(--c-blue) }

/* ── SERVICES ── */
.svc-grid-main { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.svc-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:32px;
  transition:var(--trans); position:relative; overflow:hidden;
  cursor:default;
}
/* Background image layer */
.svc-card .svc-bg-img {
  position:absolute; inset:0; border-radius:var(--radius-lg);
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .5s ease, transform .6s ease;
  transform:scale(1.08);
  z-index:0;
}
/* Overlay on top of bg image */
.svc-card .svc-bg-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 50%, rgba(230,235,255,.88) 100%);
  border-radius:var(--radius-lg);
}
[data-theme="dark"] .svc-card .svc-bg-img::after {
  background:linear-gradient(160deg, rgba(15,20,45,.92) 0%, rgba(15,20,45,.78) 50%, rgba(10,15,40,.9) 100%);
}
.svc-card:hover .svc-bg-img {
  opacity:1; transform:scale(1);
}
.svc-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(53,87,255,.03), rgba(0,198,190,.03));
  opacity:0; transition:opacity .3s; z-index:0;
}
.svc-card:hover {
  transform:translateY(-10px);
  border-color:rgba(53,87,255,.3);
  box-shadow:0 20px 60px rgba(53,87,255,.15), 0 0 0 1px rgba(53,87,255,.15);
}
.svc-card:hover::after { opacity:1 }
.svc-icon {
  width:56px; height:56px; border-radius:14px; margin-bottom:20px;
  background:rgba(53,87,255,.08); display:flex; align-items:center; justify-content:center;
  font-size:1.65rem; position:relative; z-index:1;
  transition:transform .4s var(--spring), background .3s;
}
.svc-card:hover .svc-icon { transform:scale(1.15) rotate(-8deg); background:var(--grd-accent) }
.svc-card h3 { font-size:1.12rem; font-weight:700; margin-bottom:10px; position:relative; z-index:1 }
.svc-card p { font-size:.9rem; color:var(--c-text2); line-height:1.7; position:relative; z-index:1 }
.svc-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:.82rem; font-weight:700; color:var(--c-blue); transition:gap .2s;
  position:relative; z-index:1;
}
.svc-card:hover .svc-link { gap:10px }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.about-visual { position:relative }
.about-main-card {
  background:var(--grd-hero); border-radius:var(--radius-xl);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.about-main-card::before {
  content:''; position:absolute; inset:0;
  background:conic-gradient(from 0deg at 70% 30%, rgba(53,87,255,.25), rgba(0,198,190,.15), transparent 60%);
}
.about-logo-glow {
  position:relative; z-index:1; text-align:center;
}
.about-logo-glow img {
  width:140px; filter:drop-shadow(0 0 40px rgba(53,87,255,.7)) drop-shadow(0 0 80px rgba(0,198,190,.35));
  border-radius:18px; margin:0 auto;
  animation:floatY 3s ease-in-out infinite;
}
.about-badge-card {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--c-blue); color:#fff;
  border-radius:var(--radius); padding:18px 24px;
  box-shadow:var(--sh-blue);
}
.about-badge-card .nb { font-family:var(--f-display); font-size:2.2rem; font-weight:800; line-height:1 }
.about-badge-card .nl { font-size:.75rem; opacity:.75; margin-top:3px }
.about-feats { display:flex; flex-direction:column; gap:16px; margin-top:28px }
.about-feat { display:flex; gap:14px; align-items:flex-start }
.feat-dot {
  width:40px; height:40px; flex-shrink:0; border-radius:10px;
  background:rgba(53,87,255,.09); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.about-feat h4 { font-weight:700; font-size:.94rem; margin-bottom:3px }
.about-feat p { font-size:.86rem; color:var(--c-text2) }

/* ── NUMBERS ── */
.numbers {
  background:var(--c-dark); padding:72px 0; position:relative; overflow:hidden;
}
.numbers::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(53,87,255,.15), transparent 60%);
}
.numbers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative; z-index:1 }
.num-item { text-align:center }
.num-val { font-family:var(--f-display); font-size:3rem; font-weight:800; color:#fff; line-height:1 }
.num-val em { color:var(--c-teal); font-style:normal }
.num-lbl { font-size:.78rem; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.12em; margin-top:8px }

/* ── PROCESS ── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px; position:relative }
.process-grid::before {
  content:''; position:absolute; top:48px; left:13%; right:13%; height:1px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-teal));
  z-index:0;
}
.proc-card { text-align:center; position:relative; z-index:1 }
.proc-num {
  width:80px; height:80px; border-radius:50%;
  background:var(--grd-accent); color:#fff;
  font-family:var(--f-display); font-size:1.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  box-shadow:var(--sh-blue);
  transition:transform .4s var(--spring), box-shadow .3s;
}
.proc-card:hover .proc-num { transform:scale(1.14) translateY(-6px); box-shadow:0 18px 52px rgba(53,87,255,.45) }
.proc-card h4 { font-weight:700; font-size:.96rem; margin-bottom:8px }
.proc-card p { font-size:.86rem; color:var(--c-text2); line-height:1.6 }

/* ── TESTIMONIALS ── */
.testi-wrap { position:relative; overflow:hidden; margin-top:52px }
.testi-track { display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1) }
.testi-card {
  flex:0 0 calc(50% - 12px); min-width:calc(50% - 12px);
  margin-right:24px;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:36px; position:relative;
}
.testi-card::before {
  content:'"'; position:absolute; top:12px; right:24px;
  font-size:7rem; font-family:serif; color:var(--c-blue); opacity:.06; line-height:1;
}
.stars { display:flex; gap:3px; margin-bottom:16px }
.stars span { color:var(--c-amber); font-size:.9rem }
.testi-text { font-size:.94rem; line-height:1.85; color:var(--c-text2); margin-bottom:24px; font-style:italic }
.testi-author { display:flex; align-items:center; gap:12px }
.testi-av {
  width:46px; height:46px; border-radius:50%;
  background:var(--grd-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; flex-shrink:0;
}
.testi-name { font-weight:700; font-size:.92rem }
.testi-role { font-size:.8rem; color:var(--c-text3); margin-top:1px }
.carousel-nav { display:flex; justify-content:center; gap:12px; margin-top:32px; align-items:center }
.c-btn {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--c-border); background:var(--c-card);
  color:var(--c-text); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--trans);
}
.c-btn:hover { background:var(--c-blue); color:#fff; border-color:var(--c-blue) }
.c-dots { display:flex; gap:7px }
.c-dot { width:7px; height:7px; border-radius:50%; background:var(--c-border); cursor:pointer; transition:var(--trans) }
.c-dot.on { background:var(--c-blue); width:22px; border-radius:4px }

/* ── PORTFOLIO ── */
.port-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.port-card {
  border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; position:relative; cursor:pointer;
}
.port-bg { position:absolute; inset:0; transition:transform .55s ease }
.port-card:hover .port-bg { transform:scale(1.08) }
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,13,.92) 0%, rgba(8,9,13,.2) 55%, transparent 100%);
}
.port-info {
  position:absolute; bottom:0; left:0; right:0; padding:22px;
  transform:translateY(16px); opacity:0; transition:all .35s ease;
}
.port-card:hover .port-info { transform:none; opacity:1 }
.port-tag {
  display:inline-block; background:rgba(53,87,255,.3); color:var(--c-teal);
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; margin-bottom:7px;
}
.port-info h3 { color:#fff; font-weight:700; font-size:1rem }
.port-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:3.8rem; transition:all .35s ease;
}
.port-card:hover .port-icon { transform:scale(.8); opacity:.35 }

/* ── FAQ ── */
.faq-list { max-width:800px; margin:52px auto 0; display:flex; flex-direction:column; gap:10px }
.faq-item {
  border:1px solid var(--c-border); border-radius:var(--radius);
  background:var(--c-card); overflow:hidden; transition:var(--trans);
}
.faq-item.on { border-color:rgba(53,87,255,.3); box-shadow:0 4px 24px rgba(53,87,255,.08) }
.faq-q {
  width:100%; text-align:left; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:600; font-size:.96rem; color:var(--c-text); background:none;
}
.faq-ic {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(53,87,255,.08); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:all .35s var(--spring);
}
.faq-item.on .faq-ic { background:var(--c-blue); color:#fff; transform:rotate(45deg) }
.faq-body { max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out) }
.faq-text { padding:0 24px 20px; font-size:.9rem; color:var(--c-text2); line-height:1.8 }

/* ── PRICING ── */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:start }
.price-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:32px;
  transition:var(--trans); position:relative; overflow:hidden;
}
.price-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg) }
.price-card.featured {
  background:var(--c-navy); border-color:rgba(53,87,255,.5);
  box-shadow:var(--sh-blue), 0 24px 80px rgba(53,87,255,.25);
  transform:scale(1.04);
}
.price-card.featured:hover { transform:scale(1.04) translateY(-6px) }
.pop-badge {
  position:absolute; top:16px; right:16px;
  background:var(--c-blue); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:99px;
}
.p-tier { font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue); margin-bottom:10px }
.price-card.featured .p-tier { color:var(--c-teal) }
.p-price { font-family:var(--f-display); font-size:2.8rem; font-weight:800; line-height:1; color:var(--c-text) }
.price-card.featured .p-price { color:#fff }
.p-per { font-size:.82rem; color:var(--c-text3); margin-top:4px }
.price-card.featured .p-per { color:rgba(255,255,255,.4) }
.p-desc { font-size:.87rem; color:var(--c-text2); margin:14px 0; line-height:1.65 }
.price-card.featured .p-desc { color:rgba(255,255,255,.55) }
.p-div { border:none; border-top:1px solid var(--c-border); margin:20px 0 }
.price-card.featured .p-div { border-color:rgba(255,255,255,.1) }
.p-feats { display:flex; flex-direction:column; gap:10px; margin-bottom:28px }
.p-feat { display:flex; align-items:center; gap:9px; font-size:.87rem; color:var(--c-text2) }
.price-card.featured .p-feat { color:rgba(255,255,255,.7) }
.p-feat::before {
  content:'✓'; width:18px; height:18px; flex-shrink:0; border-radius:50%;
  background:rgba(34,197,94,.12); color:var(--c-green);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; text-align:center; line-height:18px;
}
.price-card.featured .p-feat::before { background:rgba(34,197,94,.2) }

/* ── TEAM ── */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px }
.team-card { text-align:center }
.team-av {
  width:210px; height:210px; border-radius:50%; margin:0 auto 18px;
  background:var(--grd-accent); display:flex; align-items:center; justify-content:center;
  font-size:2.3rem; position:relative;
  box-shadow:0 0 0 4px var(--c-bg), 0 0 0 6px rgba(53,87,255,.15);
  transition:all .4s var(--spring);
}
.team-card:hover .team-av {
  box-shadow:0 0 0 4px var(--c-bg), 0 0 0 6px var(--c-blue), 0 0 40px rgba(53,87,255,.2);
  transform:scale(1.07);
}
.team-name { font-weight:700; font-size:1rem; margin-bottom:2px }
.team-role { color:var(--c-blue); font-size:.8rem; font-weight:700; margin-bottom:10px }
.team-bio { font-size:.84rem; color:var(--c-text2); line-height:1.6; margin-bottom:14px }
.team-soc { display:flex; justify-content:center; gap:8px }
.team-soc a {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; transition:all .25s ease;
}
.team-soc a:hover { background:var(--c-blue); border-color:var(--c-blue); color:#fff; transform:translateY(-3px) }

/* ── JOBS ── */
.jobs-list { display:flex; flex-direction:column; gap:12px; margin-top:36px }
.job-row {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius); padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:var(--trans);
}
.job-row:hover { border-color:var(--c-blue); box-shadow:0 4px 24px rgba(53,87,255,.1); transform:translateX(4px) }
.job-title { font-weight:700; margin-bottom:6px; font-size:.96rem }
.job-tags { display:flex; gap:7px; flex-wrap:wrap }
.jtag { font-size:.72rem; background:rgba(53,87,255,.08); color:var(--c-blue); padding:3px 10px; border-radius:99px; font-weight:700 }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.blog-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); overflow:hidden; transition:var(--trans);
}
.blog-card:hover { transform:translateY(-9px); box-shadow:var(--sh-lg); border-color:rgba(53,87,255,.2) }
.blog-thumb {
  aspect-ratio:16/9; background:var(--grd-hero);
  display:flex; align-items:center; justify-content:center;
  font-size:2.8rem; position:relative; overflow:hidden;
}
.blog-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(53,87,255,.2), rgba(0,198,190,.1));
}
.blog-body { padding:20px }
.blog-meta { display:flex; align-items:center; gap:10px; margin-bottom:10px }
.bcat { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue) }
.btime { font-size:.72rem; color:var(--c-text3) }
.blog-card h3 { font-size:1.02rem; font-weight:700; line-height:1.35; margin-bottom:10px }
.blog-card p { font-size:.85rem; color:var(--c-text2); line-height:1.7 }
.blog-foot {
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--c-border);
}
.blog-av { width:26px; height:26px; border-radius:50%; background:var(--grd-accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.65rem; font-weight:700 }
.blog-auth { font-size:.78rem; color:var(--c-text3) }
.filter-row { display:flex; gap:7px; flex-wrap:wrap }
.ftag {
  padding:6px 14px; border-radius:99px;
  border:1.5px solid var(--c-border);
  font-size:.77rem; font-weight:700; color:var(--c-text2);
  background:var(--c-card); transition:var(--trans); cursor:pointer;
}
.ftag.on, .ftag:hover { background:var(--c-blue); border-color:var(--c-blue); color:#fff }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; margin-top:52px; align-items:start }
.c-info h3 { font-size:1.5rem; font-weight:700; margin-bottom:18px }
.c-methods { display:flex; flex-direction:column; gap:14px; margin-bottom:28px }
.c-method { display:flex; align-items:center; gap:13px }
.c-method-ic { width:40px; height:40px; flex-shrink:0; border-radius:10px; background:rgba(53,87,255,.09); display:flex; align-items:center; justify-content:center; font-size:1rem }
.c-method-lbl { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text3); margin-bottom:1px }
.c-method-val { font-weight:600; font-size:.92rem }
.form-box { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius-xl); padding:36px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fg { display:flex; flex-direction:column; gap:6px }
.fg.span2 { grid-column:1/-1 }
.flabel { font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text3) }
.finput {
  padding:11px 14px; border:1.5px solid var(--c-border);
  border-radius:var(--radius-sm,8px); background:var(--c-bg);
  color:var(--c-text); font-size:.92rem; transition:var(--trans);
}
.finput:focus { border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(53,87,255,.1) }
.finput::placeholder { color:var(--c-text3); opacity:.55 }
textarea.finput { resize:vertical; min-height:108px }
.form-ok { display:none; text-align:center; padding:36px; border-radius:var(--radius); background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); color:var(--c-green) }
.form-ok.show { display:block }
.form-ok .ok-ic { font-size:2.8rem; margin-bottom:12px }

/* ── FOOTER ── */
footer { background:var(--c-dark); color:#fff; padding:80px 0 0 }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:52px }
.foot-brand h3 { font-family:var(--f-display); font-size:1.4rem; font-weight:800; margin-bottom:14px }
.foot-brand p { color:rgba(255,255,255,.4); font-size:.9rem; line-height:1.8; margin-bottom:22px }
.foot-soc { display:flex; gap:10px }
.fsoc {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  transition:var(--trans);
  opacity:0; animation:socialPop .5s ease forwards;
}
.fsoc:nth-child(1){animation-delay:.1s}
.fsoc:nth-child(2){animation-delay:.2s}
.fsoc:nth-child(3){animation-delay:.3s}
.fsoc:nth-child(4){animation-delay:.4s}
@keyframes socialPop { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.fsoc:hover { background:var(--c-blue); border-color:var(--c-blue); transform:translateY(-4px) }
.foot-col h4 { font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.85); margin-bottom:16px }
.foot-links { display:flex; flex-direction:column; gap:10px }
.foot-links a { color:rgba(255,255,255,.4); font-size:.88rem; transition:var(--trans) }
.foot-links a:hover { color:#fff; padding-left:4px }
.nl-form { display:flex; gap:7px; margin-top:12px }
.nl-in {
  flex:1; padding:10px 13px; border:1px solid rgba(255,255,255,.14);
  border-radius:9px; background:rgba(255,255,255,.05); color:#fff; font-size:.83rem;
}
.nl-in:focus { border-color:var(--c-blue) }
.nl-in::placeholder { color:rgba(255,255,255,.28) }
.nl-btn {
  padding:10px 14px; background:var(--c-blue); color:#fff;
  border-radius:9px; font-size:.83rem; font-weight:700; transition:background .2s;
  border:none; cursor:pointer; font-family:var(--f-sans); white-space:nowrap;
}
.nl-btn:hover { background:var(--c-blue2) }
.foot-bottom {
  border-top:1px solid rgba(255,255,255,.07);
  padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.foot-bottom p { color:rgba(255,255,255,.28); font-size:.82rem }
.foot-bottom-links { display:flex; gap:18px }
.foot-bottom-links a { color:rgba(255,255,255,.28); font-size:.82rem; transition:color .2s }
.foot-bottom-links a:hover { color:rgba(255,255,255,.7) }

/* ── BACK TO TOP ── */
#btt {
  position:fixed; bottom:92px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:var(--c-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  box-shadow:var(--sh-blue); z-index:500;
  opacity:0; transform:translateY(16px);
  transition:all .3s ease; pointer-events:none;
}
#btt.show { opacity:1; transform:none; pointer-events:all }
#btt:hover { background:var(--c-blue2); transform:translateY(-4px) }

/* ── CHAT WIDGET ── */
#chat-widget { position:fixed; bottom:20px; right:20px; z-index:500 }
.chat-btn-wrap {
  width:52px; height:52px; border-radius:50%;
  background:var(--grd-accent); color:#fff; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(53,87,255,.45);
  transition:all .4s var(--spring); border:none; cursor:pointer;
  animation:chatPulse 3s ease-in-out infinite;
}
.chat-btn-wrap:hover { transform:scale(1.1) }
@keyframes chatPulse {
  0%,100%{ box-shadow:0 8px 30px rgba(53,87,255,.45), 0 0 0 0 rgba(53,87,255,.25) }
  50%{ box-shadow:0 8px 48px rgba(53,87,255,.6), 0 0 0 12px rgba(53,87,255,0) }
}
.chat-box {
  position:absolute; bottom:64px; right:0; width:308px;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:20px; box-shadow:var(--sh-lg); overflow:hidden;
  opacity:0; transform:scale(.88) translateY(16px); pointer-events:none;
  transition:all .35s var(--spring); transform-origin:bottom right;
}
.chat-box.open { opacity:1; transform:none; pointer-events:all }
.chat-head { background:var(--grd-accent); padding:14px 18px; display:flex; align-items:center; gap:10px }
.chat-av { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0 }
.chat-head-info h4 { color:#fff; font-weight:700; font-size:.86rem }
.chat-online { color:rgba(255,255,255,.65); font-size:.7rem; display:flex; align-items:center; gap:4px }
.chat-online::before { content:''; width:5px; height:5px; background:#4ade80; border-radius:50%; animation:blink 1.5s ease-in-out infinite }
.chat-msgs { padding:12px; height:185px; overflow-y:auto; display:flex; flex-direction:column; gap:9px }
.cmsg { max-width:82%; padding:8px 12px; border-radius:11px; font-size:.82rem; line-height:1.5 }
.cmsg.bot { background:rgba(53,87,255,.07); color:var(--c-text); border-bottom-left-radius:3px }
.cmsg.user { background:var(--c-blue); color:#fff; align-self:flex-end; border-bottom-right-radius:3px }
.chat-row { display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--c-border) }
.chat-in { flex:1; padding:7px 10px; border:1px solid var(--c-border); border-radius:99px; background:var(--c-bg); color:var(--c-text); font-size:.82rem; font-family:var(--f-sans) }
.chat-in:focus { border-color:var(--c-blue) }
.chat-send { width:32px; height:32px; border-radius:50%; background:var(--c-blue); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.82rem; transition:background .2s; flex-shrink:0 }
.chat-send:hover { background:var(--c-blue2) }

/* ── COOKIE ── */
#cookie {
  position:fixed; bottom:20px; left:20px; right:20px; max-width:560px;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:20px 24px;
  box-shadow:var(--sh-lg); z-index:600;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  transition:all .4s ease;
}
#cookie.hide { transform:translateY(200%); opacity:0; pointer-events:none }
.ck-text { flex:1; font-size:.84rem; color:var(--c-text2); min-width:200px }
.ck-text strong { color:var(--c-text) }
.ck-btns { display:flex; gap:8px; flex-shrink:0 }
.ck-ok { padding:9px 18px; background:var(--c-blue); color:#fff; border-radius:9px; font-size:.83rem; font-weight:700; border:none; cursor:pointer; font-family:var(--f-sans); transition:background .2s }
.ck-ok:hover { background:var(--c-blue2) }
.ck-no { padding:9px 14px; border:1px solid var(--c-border); color:var(--c-text2); border-radius:9px; font-size:.83rem; cursor:pointer; background:none; font-family:var(--f-sans); transition:var(--trans) }
.ck-no:hover { border-color:var(--c-text2); color:var(--c-text) }

/* ── WHATSAPP ── */
#wa-btn {
  position:fixed; bottom:82px; right:20px; z-index:500;
  width:44px; height:44px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700;
  box-shadow:0 6px 24px rgba(37,211,102,.4);
  transition:all .35s var(--spring);
  text-decoration:none;
}
#wa-btn:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 10px 36px rgba(37,211,102,.5) }
#wa-btn::before {
  content:'WhatsApp'; position:absolute; right:54px;
  background:var(--c-dark); color:#fff; font-size:.7rem; font-weight:600;
  padding:5px 10px; border-radius:6px; white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:all .25s ease; pointer-events:none;
}
#wa-btn:hover::before { opacity:1; transform:none }

/* ── PAGE HERO (subpages) ── */
.page-hero {
  background:var(--grd-hero); padding:calc(var(--nav-h) + 80px) 0 72px;
  text-align:center; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px; animation:gridScroll 20s linear infinite;
}
.page-hero .badge { margin:0 auto 16px }
.page-hero h1 { color:#fff; position:relative; z-index:1 }
.page-hero p.lead { color:rgba(255,255,255,.6); margin-left:auto; margin-right:auto; position:relative; z-index:1 }

/* ── SECTION DIVIDER ── */
.s-divider {
  border:none; border-top:1px solid var(--c-border); margin:0;
}

/* ── REVEAL ANIMATIONS ── */
.rv { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease }
.rv.vis { opacity:1; transform:none }
.rv-l { opacity:0; transform:translateX(-28px); transition:opacity .7s ease, transform .7s ease }
.rv-l.vis { opacity:1; transform:none }
.rv-r { opacity:0; transform:translateX(28px); transition:opacity .7s ease, transform .7s ease }
.rv-r.vis { opacity:1; transform:none }

/* ── KEYFRAMES ── */
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-32px) scale(1.05)} }
@keyframes gridScroll { from{background-position:0 0} to{background-position:0 64px} }
@keyframes glowPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes fadeRight { from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:none} }
@keyframes loadBar { from{width:0} to{width:100%} }
@keyframes navIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes scrollLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .hero-inner { grid-template-columns:1fr; gap:50px }
  .hero-visual { display:none }
  .svc-grid-main { grid-template-columns:repeat(2,1fr) }
  .foot-grid { grid-template-columns:1fr 1fr }
  .team-grid { grid-template-columns:repeat(2,1fr) }
  .price-grid { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto }
  .price-card.featured { transform:none }
}
@media(max-width:900px) {
  .nav-links,.nav-actions { display:none }
  .hamburger { display:flex }
  .about-grid,.contact-grid { grid-template-columns:1fr }
  .svc-grid-main { grid-template-columns:repeat(2,1fr) }
  .port-grid { grid-template-columns:repeat(2,1fr) }
  .blog-grid { grid-template-columns:1fr }
  .process-grid { grid-template-columns:1fr 1fr }
  .process-grid::before { display:none }
  .numbers-grid { grid-template-columns:repeat(2,1fr) }
  .testi-card { flex:0 0 100%; min-width:100% }
  .foot-grid { grid-template-columns:1fr }
}
@media(max-width:560px) {
  :root { --nav-h:62px }
  .section { padding:70px 0 }
  .svc-grid-main { grid-template-columns:1fr }
  .port-grid { grid-template-columns:1fr }
  .team-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .process-grid { grid-template-columns:1fr }
  .hero-stats { gap:18px }
  #cookie { left:10px; right:10px }
}