:root {
            --primary-red: #ff1e1e;
            --primary-black: #0a0a0a;
            --dark-gray: #1a1a1a;
            --medium-gray: #2a2a2a;
            --light-gray: #888888;
            --white: #ffffff;
            --glass-bg: rgba(255,255,255,0.03);
            --glass-border: rgba(255,255,255,0.08);
            --glow-red: 0 0 40px rgba(255,30,30,0.3), 0 0 80px rgba(255,30,30,0.1);
            --glow-red-sm: 0 0 20px rgba(255,30,30,0.2);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            font-family:'Inter',sans-serif;
            background:var(--primary-black);
            color:var(--white);
            overflow-x:hidden;
            line-height:1.6;
        }
        ::selection { background:rgba(255,30,30,0.3); color:var(--white); }
        ::-webkit-scrollbar { width:8px; }
        ::-webkit-scrollbar-track { background:var(--primary-black); }
        ::-webkit-scrollbar-thumb { background:var(--primary-red); border-radius:4px; }

       /* =========================
   PREMIUM WEBSITE LOADER
========================= */

.loader{
    position:fixed;
    inset:0;
    z-index:99999;

    background:#050505;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

/* Hide Loader */
.loader.hidden{
    opacity:0;
    visibility:hidden;
}

/* Loader Content */
.loader-content{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Logo Image */
.loader-logo-img{
    width:220px;
    max-width:80vw;

    object-fit:contain;

    animation:
        logoFloat 2s ease-in-out infinite,
        logoGlow 2s ease-in-out infinite alternate;

    filter:
        drop-shadow(0 0 10px rgba(255,0,0,0.35))
        drop-shadow(0 0 30px rgba(255,0,0,0.25));

    transition:0.4s ease;
}

/* Loading Bar */
.loader-bar{
    width:220px;
    height:3px;

    background:rgba(255,255,255,0.08);

    margin-top:30px;

    border-radius:999px;

    overflow:hidden;

    position:relative;
}

/* Inner Loading Bar */
.loader-bar-inner{
    width:0;
    height:100%;

    background:linear-gradient(
        90deg,
        #ff0000,
        #ff3b3b,
        #ff0000
    );

    border-radius:999px;

    box-shadow:
        0 0 10px rgba(255,0,0,0.7),
        0 0 25px rgba(255,0,0,0.5);

    animation:loaderFill 2s ease forwards;
}

/* Floating Animation */
@keyframes logoFloat{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
    100%{
        transform:translateY(0px);
    }
}

/* Glow Animation */
@keyframes logoGlow{
    from{
        filter:
            drop-shadow(0 0 8px rgba(255,0,0,0.3))
            drop-shadow(0 0 20px rgba(255,0,0,0.2));
    }

    to{
        filter:
            drop-shadow(0 0 18px rgba(255,0,0,0.6))
            drop-shadow(0 0 40px rgba(255,0,0,0.4));
    }
}

/* Loader Fill */
@keyframes loaderFill{
    to{
        width:100%;
    }
}

        /* Navbar */
        .navbar {
            position:fixed; top:0; left:0; right:0; z-index:1000;
            padding:20px 5%; transition:all 0.4s ease;
            background:transparent;
        }
        .navbar.scrolled {
            background:rgba(10,10,10,0.9);
            backdrop-filter:blur(20px);
            border-bottom:1px solid var(--glass-border);
            padding:15px 5%;
        }
        .nav-container {
            max-width:1400px; margin:0 auto;
            display:flex; align-items:center; justify-content:space-between;
        }
        .nav-logo {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.5rem; font-weight:700; color:var(--white);
            text-decoration:none; letter-spacing:2px;
        }
        .nav-logo span { color:var(--primary-red); }
        .nav-links {
            display:flex; gap:40px; list-style:none;
        }
        .nav-links a {
            color:var(--light-gray); text-decoration:none;
            font-size:0.9rem; font-weight:500;
            transition:color 0.3s ease; position:relative;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-5px; left:0;
            width:0; height:2px; background:var(--primary-red);
            transition:width 0.3s ease;
        }
        .nav-links a:hover { color:var(--white); }
        .nav-links a:hover::after { width:100%; }
        .nav-cta {
            padding:12px 28px; background:var(--primary-red);
            color:var(--white); text-decoration:none; font-weight:600;
            border-radius:50px; font-size:0.85rem;
            transition:all 0.3s ease; border:none; cursor:pointer;
            box-shadow:var(--glow-red-sm);
        }
        .nav-cta:hover {
            transform:translateY(-2px);
            box-shadow:var(--glow-red);
        }
        .mobile-toggle {
            display:none; flex-direction:column; gap:5px;
            background:none; border:none; cursor:pointer; padding:5px;
        }
        .mobile-toggle span {
            display:block; width:25px; height:2px;
            background:var(--white); transition:all 0.3s ease;
        }

        /* Hero */
        .hero {
            min-height:100vh; position:relative;
            display:flex; align-items:center; justify-content:center;
            overflow:hidden; padding:120px 5% 80px;
        }
        .hero-bg {
            position:absolute; inset:0; z-index:0;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(255,30,30,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(255,30,30,0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(255,30,30,0.08) 0%, transparent 50%);
        }
        .hero-grid {
            position:absolute; inset:0; z-index:0; opacity:0.3;
            background-image:
                linear-gradient(rgba(255,30,30,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,30,30,0.1) 1px, transparent 1px);
            background-size:60px 60px;
            animation:gridMove 20s linear infinite;
        }
        @keyframes gridMove {
            0% { transform:translate(0,0); }
            100% { transform:translate(60px,60px); }
        }
        .hero-particles {
            position:absolute; inset:0; z-index:0; overflow:hidden;
        }
        .particle {
            position:absolute; width:4px; height:4px;
            background:var(--primary-red); border-radius:50%;
            opacity:0.6; animation:floatParticle 15s infinite ease-in-out;
            box-shadow:0 0 10px var(--primary-red);
        }
        @keyframes floatParticle {
            0%,100% { transform:translateY(0) translateX(0); opacity:0.3; }
            25% { transform:translateY(-100px) translateX(50px); opacity:0.8; }
            50% { transform:translateY(-50px) translateX(-30px); opacity:0.5; }
            75% { transform:translateY(-150px) translateX(20px); opacity:0.7; }
        }
        .hero-content {
            position:relative; z-index:2; text-align:center; max-width:900px;
        }
        .hero-badge {
            display:inline-flex; align-items:center; gap:8px;
            padding:8px 20px; background:var(--glass-bg);
            border:1px solid var(--glass-border); border-radius:50px;
            font-size:0.85rem; color:var(--light-gray); margin-bottom:30px;
            backdrop-filter:blur(10px);
        }
        .hero-badge .dot {
            width:8px; height:8px; background:var(--primary-red);
            border-radius:50%; animation:pulse 2s infinite;
        }
        @keyframes pulse {
            0%,100% { opacity:1; transform:scale(1); }
            50% { opacity:0.5; transform:scale(1.2); }
        }
        .hero-title {
            font-family:'Space Grotesk',sans-serif;
            font-size:clamp(2.5rem,6vw,5rem); font-weight:700;
            line-height:1.1; margin-bottom:24px; letter-spacing:-2px;
        }
        .hero-title .highlight {
            background:linear-gradient(135deg, var(--primary-red), #ff6b6b);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            background-clip:text; position:relative;
        }
        .hero-title .highlight::after {
            content:''; position:absolute; bottom:-5px; left:0; right:0;
            height:4px; background:linear-gradient(90deg, var(--primary-red), transparent);
            border-radius:2px;
        }
        .hero-subtitle {
            font-size:clamp(1rem,2vw,1.25rem); color:var(--light-gray);
            max-width:600px; margin:0 auto 40px; font-weight:400;
        }
        .hero-buttons {
            display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
        }
        .btn-primary {
            padding:16px 40px; background:var(--primary-red);
            color:var(--white); text-decoration:none; font-weight:600;
            border-radius:50px; font-size:1rem; border:none; cursor:pointer;
            transition:all 0.3s ease; position:relative; overflow:hidden;
            box-shadow:var(--glow-red-sm); display:inline-flex; align-items:center; gap:10px;
        }
        .btn-primary:hover {
            transform:translateY(-3px); box-shadow:var(--glow-red);
        }
        .btn-primary .ripple {
            position:absolute; border-radius:50%; background:rgba(255,255,255,0.3);
            transform:scale(0); animation:ripple 0.6s ease-out;
        }
        @keyframes ripple {
            to { transform:scale(4); opacity:0; }
        }
        .btn-secondary {
            padding:16px 40px; background:transparent;
            color:var(--white); text-decoration:none; font-weight:600;
            border-radius:50px; font-size:1rem; border:1px solid var(--glass-border);
            cursor:pointer; transition:all 0.3s ease;
            display:inline-flex; align-items:center; gap:10px;
        }
        .btn-secondary:hover {
            border-color:var(--primary-red); background:rgba(255,30,30,0.05);
        }
        .hero-mockups {
            position:relative; margin-top:60px; height:300px;
            perspective:1000px;
        }
        .mockup-card {
            position:absolute; background:var(--glass-bg);
            backdrop-filter:blur(20px); border:1px solid var(--glass-border);
            border-radius:16px; padding:20px; width:280px;
            box-shadow:0 20px 60px rgba(0,0,0,0.5);
            animation:floatMockup 6s ease-in-out infinite;
        }
        .mockup-card:nth-child(1) { left:10%; top:20%; animation-delay:0s; transform:rotateY(-15deg) rotateX(5deg); }
        .mockup-card:nth-child(2) { right:10%; top:10%; animation-delay:2s; transform:rotateY(15deg) rotateX(5deg); }
        .mockup-card:nth-child(3) { left:50%; top:50%; transform:translateX(-50%) rotateY(0deg); animation-delay:4s; width:320px; }
        @keyframes floatMockup {
            0%,100% { transform:translateY(0) rotateY(var(--r,0deg)); }
            50% { transform:translateY(-20px) rotateY(var(--r,0deg)); }
        }
        .mockup-header {
            display:flex; gap:6px; margin-bottom:12px;
        }
        .mockup-dot { width:10px; height:10px; border-radius:50%; }
        .mockup-dot:nth-child(1) { background:#ff5f57; }
        .mockup-dot:nth-child(2) { background:#febc2e; }
        .mockup-dot:nth-child(3) { background:#28c840; }
        .mockup-body {
            height:120px; background:linear-gradient(135deg, var(--dark-gray), var(--medium-gray));
            border-radius:8px; position:relative; overflow:hidden;
        }
        .mockup-body::after {
            content:''; position:absolute; inset:0;
            background:linear-gradient(45deg, transparent 40%, rgba(255,30,30,0.1) 50%, transparent 60%);
            animation:shimmer 3s infinite;
        }
        @keyframes shimmer {
            0% { transform:translateX(-100%); }
            100% { transform:translateX(100%); }
        }
        .mockup-bar { height:8px; background:var(--medium-gray); border-radius:4px; margin-top:10px; width:70%; }
        .mockup-bar:nth-child(5) { width:50%; }

        /* Sections Common */
        section { padding:100px 5%; position:relative; }
        .container { max-width:1200px; margin:0 auto; }
        .section-header {
            text-align:center; margin-bottom:60px;
        }
        .section-label {
            display:inline-block; padding:6px 16px;
            background:rgba(255,30,30,0.1); border:1px solid rgba(255,30,30,0.2);
            color:var(--primary-red); font-size:0.8rem; font-weight:600;
            border-radius:50px; text-transform:uppercase; letter-spacing:2px; margin-bottom:16px;
        }
        .section-title {
            font-family:'Space Grotesk',sans-serif;
            font-size:clamp(2rem,4vw,3rem); font-weight:700;
            margin-bottom:16px; line-height:1.2;
        }
        .section-desc {
            color:var(--light-gray); font-size:1.1rem; max-width:600px; margin:0 auto;
        }
        .reveal {
            opacity:0; transform:translateY(40px);
            transition:all 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal.active { opacity:1; transform:translateY(0); }

        /* About */
        .about-grid {
            display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
        }
        .about-text h3 {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.8rem; font-weight:600; margin-bottom:20px;
        }
        .about-text p { color:var(--light-gray); margin-bottom:16px; font-size:1.05rem; }
        .about-stats {
            display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:30px;
        }
        .stat-card {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:16px; padding:24px; text-align:center;
            backdrop-filter:blur(10px); transition:all 0.3s ease;
        }
        .stat-card:hover {
            border-color:rgba(255,30,30,0.3);
            box-shadow:var(--glow-red-sm); transform:translateY(-5px);
        }
        .stat-number {
            font-family:'Space Grotesk',sans-serif;
            font-size:2.5rem; font-weight:700; color:var(--primary-red);
            line-height:1;
        }
        .stat-label { color:var(--light-gray); font-size:0.9rem; margin-top:8px; }
        .about-visual {
            position:relative; height:400px;
        }
        .about-visual-inner {
            position:absolute; inset:0;
            background:linear-gradient(135deg, var(--dark-gray), var(--medium-gray));
            border-radius:24px; overflow:hidden; border:1px solid var(--glass-border);
        }
        .about-visual-inner::before {
            content:''; position:absolute; inset:0;
            background:radial-gradient(circle at 30% 30%, rgba(255,30,30,0.2), transparent 60%);
        }
        .about-visual-content {
            position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        }
        .about-visual-content svg { width:60%; height:60%; opacity:0.8; }

        /* Services */
        .services-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px;
        }
        .service-card {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:20px; padding:40px 30px; position:relative;
            overflow:hidden; transition:all 0.4s ease; cursor:pointer;
            backdrop-filter:blur(10px);
        }
        .service-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:3px;
            background:linear-gradient(90deg, transparent, var(--primary-red), transparent);
            opacity:0; transition:opacity 0.3s ease;
        }
        .service-card:hover::before { opacity:1; }
        .service-card:hover {
            border-color:rgba(255,30,30,0.3);
            box-shadow:var(--glow-red);
            transform:translateY(-8px);
        }
        .service-icon {
            width:60px; height:60px; background:rgba(255,30,30,0.1);
            border-radius:16px; display:flex; align-items:center; justify-content:center;
            margin-bottom:24px; font-size:1.5rem; color:var(--primary-red);
            transition:all 0.3s ease;
        }
        .service-card:hover .service-icon {
            background:var(--primary-red); color:var(--white);
            box-shadow:0 0 30px rgba(255,30,30,0.4);
        }
        .service-card h3 {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.3rem; font-weight:600; margin-bottom:12px;
        }
        .service-card p { color:var(--light-gray); font-size:0.95rem; }

        /* Portfolio */
        .portfolio-filters {
            display:flex; gap:12px; justify-content:center; margin-bottom:40px; flex-wrap:wrap;
        }
        .filter-btn {
            padding:10px 24px; background:var(--glass-bg); border:1px solid var(--glass-border);
            color:var(--light-gray); border-radius:50px; cursor:pointer;
            font-size:0.9rem; font-weight:500; transition:all 0.3s ease;
            backdrop-filter:blur(10px);
        }
        .filter-btn:hover, .filter-btn.active {
            background:var(--primary-red); color:var(--white); border-color:var(--primary-red);
            box-shadow:var(--glow-red-sm);
        }
        .portfolio-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(350px,1fr)); gap:24px;
        }
        .portfolio-item {
            position:relative; border-radius:20px; overflow:hidden;
            aspect-ratio:16/10; cursor:pointer; group;
        }
        .portfolio-item img {
            width:100%; height:100%; object-fit:cover;
            transition:transform 0.6s ease;
        }
        .portfolio-item:hover img { transform:scale(1.1); }
        .portfolio-overlay {
            position:absolute; inset:0;
            background:linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.3) 50%, transparent 100%);
            display:flex; flex-direction:column; justify-content:flex-end;
            padding:30px; opacity:0; transition:opacity 0.4s ease;
        }
        .portfolio-item:hover .portfolio-overlay { opacity:1; }
        .portfolio-overlay h3 { font-size:1.3rem; font-weight:600; margin-bottom:8px; }
        .portfolio-overlay p { color:var(--light-gray); font-size:0.9rem; margin-bottom:16px; }
        .portfolio-tags {
            display:flex; gap:8px; flex-wrap:wrap;
        }
        .portfolio-tag {
            padding:4px 12px; background:rgba(255,30,30,0.2);
            color:var(--primary-red); border-radius:20px;
            font-size:0.75rem; font-weight:500;
        }
        .portfolio-view {
            position:absolute; top:20px; right:20px;
            width:50px; height:50px; background:var(--primary-red);
            border-radius:50%; display:flex; align-items:center; justify-content:center;
            opacity:0; transform:scale(0.8); transition:all 0.3s ease;
            box-shadow:var(--glow-red-sm);
        }
        .portfolio-item:hover .portfolio-view { opacity:1; transform:scale(1); }

/* =========================
   PROCESS SECTION
========================= */

#process {
  padding: 120px 0;
  background: #0b0b0b;
  color: #fff;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-label {
  color: #ff3b3b;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  font-size: 48px;
  margin: 15px 0;
}

.section-desc {
  max-width: 650px;
  margin: auto;
  color: #aaa;
  line-height: 1.7;
}

/* =========================
   PROCESS SECTION
========================= */

#process {
  padding: 100px 0;
  background: #0b0b0b;
  color: #fff;
  overflow: hidden;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* =========================
   SECTION HEADER
========================= */

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-label {
  color: #ff3b3b;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  margin: 15px 0;
  line-height: 1.1;
}

.section-desc {
  max-width: 620px;
  margin: auto;
  color: #9d9d9d;
  line-height: 1.7;
  font-size: 15px;
}

/* =========================
   TIMELINE
========================= */

.process-timeline {
  position: relative;
  max-width: 950px;
  margin: auto;
}

/* CENTER LINE */
.process-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;

  background: linear-gradient(
    to bottom,
    #ff3b3b,
    rgba(255,255,255,0.05)
  );

  transform: translateX(-50%);
}

/* =========================
   STEP
========================= */

.process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 65px;
}

/* ALTERNATING SIDES */
.process-step:nth-child(even) {
  flex-direction: row-reverse;
}

/* =========================
   CONTENT BOX
========================= */

.process-content {
  width: calc(50% - 65px);

  background: rgba(255,255,255,0.03);

  border: 1px solid rgba(255,255,255,0.06);

  padding: 22px;

  border-radius: 16px;

  backdrop-filter: blur(10px);

  transition: all 0.4s ease;
}

/* HOVER EFFECT */
.process-content:hover {
  transform: translateY(-5px);

  border-color: rgba(255,59,59,0.3);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.35),
    0 0 30px rgba(255,59,59,0.08);
}

/* TEXT ALIGN */
.process-step:nth-child(even) .process-content {
  text-align: right;
}

/* =========================
   TITLE
========================= */

.process-content h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.2;
  color: #fff;
}

/* =========================
   PARAGRAPH
========================= */

.process-content p {
  color: #b8b8b8;
  line-height: 1.7;
  font-size: 14px;

  white-space: normal;
  overflow-wrap: break-word;
}

/* =========================
   ICON
========================= */

.process-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;

  border-radius: 50%;

  background: #111;

  border: 2px solid #ff3b3b;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ff3b3b;
  font-weight: 700;
  font-size: 14px;

  position: relative;
  z-index: 5;

  box-shadow:
    0 0 20px rgba(255,59,59,0.2),
    0 0 45px rgba(255,59,59,0.06);

  transition: all 0.4s ease;
}

/* ICON HOVER */
.process-step:hover .process-icon {
  transform: scale(1.08);

  box-shadow:
    0 0 25px rgba(255,59,59,0.35),
    0 0 60px rgba(255,59,59,0.12);
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px) {

  #process {
    padding: 80px 0;
  }

  .section-title {
    font-size: 32px;
  }

  .section-desc {
    font-size: 14px;
  }

  /* Move line left */
  .process-timeline::before {
    left: 28px;
  }

  .process-step,
  .process-step:nth-child(even) {
    flex-direction: row;
    align-items: flex-start;
  }

  .process-content {
    width: calc(100% - 85px);
    text-align: left !important;
    padding: 18px;
  }

  .process-content h3 {
    font-size: 20px;
  }

  .process-content p {
    font-size: 13px;
    line-height: 1.6;
  }

  .process-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin-right: 18px;
    font-size: 13px;
  }

  .process-step {
    margin-bottom: 50px;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .process-timeline::before {
    left: 35px;
  }

  .process-step,
  .process-step:nth-child(even) {
    flex-direction: row;
    align-items: flex-start;
  }

  .process-content {
    width: calc(100% - 100px);
    text-align: left !important;
  }

  .process-icon {
    margin-right: 20px;
  }

}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .process-timeline::before {
    left: 35px;
  }

  .process-step,
  .process-step:nth-child(even) {
    flex-direction: row;
    align-items: flex-start;
  }

  .process-content {
    width: calc(100% - 100px);
    text-align: left !important;
  }

  .process-icon {
    margin-right: 20px;
  }

}

        /* Testimonials */
        .testimonials-slider {
            position:relative; max-width:800px; margin:0 auto; overflow:hidden;
        }
        .testimonials-track {
            display:flex; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
        }
        .testimonial-slide {
            min-width:100%; padding:0 20px;
        }
        .testimonial-card {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:24px; padding:50px; text-align:center;
            backdrop-filter:blur(20px); position:relative;
        }
        .testimonial-card::before {
            content:'"'; position:absolute; top:20px; left:30px;
            font-family:'Space Grotesk',sans-serif;
            font-size:5rem; color:rgba(255,30,30,0.2); line-height:1;
        }
        .testimonial-stars {
            display:flex; gap:4px; justify-content:center; margin-bottom:24px;
        }
        .testimonial-stars span { color:#ffc107; font-size:1.2rem; }
        .testimonial-text {
            font-size:1.2rem; line-height:1.8; color:var(--light-gray);
            margin-bottom:30px; font-style:italic;
        }
        .testimonial-author {
            display:flex; align-items:center; justify-content:center; gap:16px;
        }
        .testimonial-avatar {
            width:60px; height:60px; border-radius:50%;
            background:linear-gradient(135deg, var(--primary-red), #ff6b6b);
            display:flex; align-items:center; justify-content:center;
            font-weight:700; font-size:1.2rem; color:var(--white);
        }
        .testimonial-info h4 { font-weight:600; margin-bottom:4px; }
        .testimonial-info p { color:var(--light-gray); font-size:0.9rem; }
        .testimonial-nav {
            display:flex; gap:12px; justify-content:center; margin-top:30px;
        }
        .testimonial-nav button {
            width:50px; height:50px; border-radius:50%;
            background:var(--glass-bg); border:1px solid var(--glass-border);
            color:var(--white); cursor:pointer; font-size:1.2rem;
            transition:all 0.3s ease; display:flex; align-items:center; justify-content:center;
        }
        .testimonial-nav button:hover {
            background:var(--primary-red); border-color:var(--primary-red);
            box-shadow:var(--glow-red-sm);
        }
        .testimonial-dots {
            display:flex; gap:8px; justify-content:center; margin-top:20px;
        }
        .testimonial-dot {
            width:10px; height:10px; border-radius:50%;
            background:var(--medium-gray); cursor:pointer; transition:all 0.3s ease;
        }
        .testimonial-dot.active { background:var(--primary-red); box-shadow:0 0 10px var(--primary-red); }

        /* Technologies */
        .tech-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:20px;
            max-width:900px; margin:0 auto;
        }
        .tech-badge {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:16px; padding:24px 16px; text-align:center;
            transition:all 0.3s ease; cursor:pointer;
            backdrop-filter:blur(10px);
        }
        .tech-badge:hover {
            border-color:var(--primary-red);
            box-shadow:var(--glow-red-sm);
            transform:translateY(-5px);
        }
        .tech-badge svg { width:40px; height:40px; margin:0 auto 12px; }
        .tech-badge span {
            font-size:0.85rem; font-weight:500; color:var(--light-gray);
        }

        /* Pricing */
        .pricing-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:30px;
            max-width:1100px; margin:0 auto;
        }
        .pricing-card {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:24px; padding:40px; position:relative;
            transition:all 0.4s ease; backdrop-filter:blur(10px);
        }
        .pricing-card.featured {
            border-color:var(--primary-red);
            box-shadow:var(--glow-red);
            transform:scale(1.05);
        }
        .pricing-card.featured::before {
            content:'MOST POPULAR'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
            background:var(--primary-red); color:var(--white);
            padding:6px 20px; border-radius:20px;
            font-size:0.75rem; font-weight:700; letter-spacing:1px;
        }
        .pricing-card:hover { transform:translateY(-10px); }
        .pricing-card.featured:hover { transform:scale(1.05) translateY(-10px); }
        .pricing-name {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.3rem; font-weight:600; margin-bottom:8px;
        }
        .pricing-desc { color:var(--light-gray); font-size:0.9rem; margin-bottom:24px; }
        .pricing-price {
            font-family:'Space Grotesk',sans-serif;
            font-size:3rem; font-weight:700; margin-bottom:8px;
        }
        .pricing-price span {
            font-size:1rem; color:var(--light-gray); font-weight:400;
        }
        .pricing-features { list-style:none; margin:30px 0; }
        .pricing-features li {
            display:flex; align-items:center; gap:12px;
            padding:10px 0; color:var(--light-gray); font-size:0.95rem;
            border-bottom:1px solid var(--glass-border);
        }
        .pricing-features li:last-child { border-bottom:none; }
        .pricing-features li::before {
            content:'✓'; color:var(--primary-red); font-weight:700;
        }
        .pricing-btn {
            width:100%; padding:16px; background:var(--primary-red);
            color:var(--white); border:none; border-radius:12px;
            font-size:1rem; font-weight:600; cursor:pointer;
            transition:all 0.3s ease;
        }
        .pricing-btn:hover {
            box-shadow:var(--glow-red); transform:translateY(-2px);
        }
        .pricing-card.featured .pricing-btn { background:var(--white); color:var(--primary-black); }
        .pricing-card.featured .pricing-btn:hover { background:var(--primary-red); color:var(--white); }

        /* Contact */
        .contact-grid {
            display:grid; grid-template-columns:1fr 1fr; gap:60px;
            max-width:1100px; margin:0 auto;
        }
        .contact-info h3 {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.8rem; font-weight:600; margin-bottom:20px;
        }
        .contact-info > p { color:var(--light-gray); margin-bottom:30px; }
        .contact-item {
            display:flex; align-items:flex-start; gap:16px; margin-bottom:24px;
        }
        .contact-item-icon {
            width:50px; height:50px; background:rgba(255,30,30,0.1);
            border-radius:12px; display:flex; align-items:center; justify-content:center;
            color:var(--primary-red); font-size:1.2rem; flex-shrink:0;
        }
        .contact-item h4 { font-weight:600; margin-bottom:4px; }
        .contact-item p { color:var(--light-gray); font-size:0.95rem; }
        .contact-socials {
            display:flex; gap:12px; margin-top:30px;
        }
        .contact-social {
            width:45px; height:45px; background:var(--glass-bg);
            border:1px solid var(--glass-border); border-radius:12px;
            display:flex; align-items:center; justify-content:center;
            color:var(--white); text-decoration:none; font-size:1.1rem;
            transition:all 0.3s ease;
        }
        .contact-social:hover {
            background:var(--primary-red); border-color:var(--primary-red);
            box-shadow:var(--glow-red-sm); transform:translateY(-3px);
        }
        .contact-form {
            background:var(--glass-bg); border:1px solid var(--glass-border);
            border-radius:24px; padding:40px; backdrop-filter:blur(20px);
        }
        .form-group { margin-bottom:20px; }
        .form-group label {
            display:block; margin-bottom:8px; font-size:0.9rem; font-weight:500;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width:100%; padding:14px 18px;
            background:var(--dark-gray); border:1px solid var(--glass-border);
            border-radius:12px; color:var(--white); font-size:1rem;
            font-family:'Inter',sans-serif; transition:all 0.3s ease;
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline:none; border-color:var(--primary-red);
            box-shadow:0 0 20px rgba(255,30,30,0.1);
        }
        .form-group textarea { min-height:120px; resize:vertical; }
        .form-submit {
            width:100%; padding:16px; background:var(--primary-red);
            color:var(--white); border:none; border-radius:12px;
            font-size:1rem; font-weight:600; cursor:pointer;
            transition:all 0.3s ease;
        }
        .form-submit:hover {
            box-shadow:var(--glow-red); transform:translateY(-2px);
        }
        .whatsapp-btn {
            display:inline-flex; align-items:center; gap:10px;
            margin-top:20px; padding:14px 28px;
            background:#25d366; color:var(--white);
            text-decoration:none; border-radius:12px; font-weight:600;
            transition:all 0.3s ease;
        }
        .whatsapp-btn:hover {
            transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,0.3);
        }
        .map-container {
            margin-top:60px; border-radius:20px; overflow:hidden;
            border:1px solid var(--glass-border); height:350px;
            background:var(--dark-gray);
        }
        .map-container iframe { width:100%; height:100%; border:none; filter:grayscale(100%) invert(92%) contrast(83%); }

        /* Footer */
        .footer {
            background:var(--dark-gray); border-top:1px solid var(--glass-border);
            padding:60px 5% 30px;
        }
        .footer-grid {
            display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
            max-width:1200px; margin:0 auto 40px;
        }
        .footer-brand .footer-logo {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.5rem; font-weight:700; color:var(--white);
            text-decoration:none; letter-spacing:2px; margin-bottom:16px; display:block;
        }
        .footer-brand .footer-logo span { color:var(--primary-red); }
        .footer-brand p { color:var(--light-gray); font-size:0.95rem; margin-bottom:20px; }
        .footer-newsletter { display:flex; gap:10px; }
        .footer-newsletter input {
            flex:1; padding:12px 16px; background:var(--medium-gray);
            border:1px solid var(--glass-border); border-radius:10px;
            color:var(--white); font-size:0.9rem;
        }
        .footer-newsletter input:focus { outline:none; border-color:var(--primary-red); }
        .footer-newsletter button {
            padding:12px 20px; background:var(--primary-red);
            color:var(--white); border:none; border-radius:10px;
            cursor:pointer; font-weight:600; transition:all 0.3s ease;
        }
        .footer-newsletter button:hover { box-shadow:var(--glow-red-sm); }
        .footer-links h4 {
            font-family:'Space Grotesk',sans-serif;
            font-size:1rem; font-weight:600; margin-bottom:20px;
        }
        .footer-links ul { list-style:none; }
        .footer-links li { margin-bottom:10px; }
        .footer-links a {
            color:var(--light-gray); text-decoration:none; font-size:0.9rem;
            transition:color 0.3s ease;
        }
        .footer-links a:hover { color:var(--primary-red); }
        .footer-bottom {
            max-width:1200px; margin:0 auto;
            padding-top:30px; border-top:1px solid var(--glass-border);
            display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
        }
        .footer-bottom p { color:var(--light-gray); font-size:0.85rem; }
        .footer-socials { display:flex; gap:12px; }
        .footer-social {
            width:40px; height:40px; background:var(--medium-gray);
            border-radius:10px; display:flex; align-items:center; justify-content:center;
            color:var(--white); text-decoration:none; font-size:0.9rem;
            transition:all 0.3s ease;
        }
        .footer-social:hover { background:var(--primary-red); transform:translateY(-3px); }

        /* Modal */
        .modal-overlay {
            position:fixed; inset:0; z-index:9999;
            background:rgba(0,0,0,0.9); backdrop-filter:blur(10px);
            display:flex; align-items:center; justify-content:center;
            opacity:0; visibility:hidden; transition:all 0.4s ease;
            padding:20px;
        }
        .modal-overlay.active { opacity:1; visibility:visible; }
        .modal-content {
            background:var(--dark-gray); border:1px solid var(--glass-border);
            border-radius:24px; max-width:700px; width:100%; max-height:90vh;
            overflow-y:auto; position:relative;
            transform:scale(0.9); transition:transform 0.4s ease;
        }
        .modal-overlay.active .modal-content { transform:scale(1); }
        .modal-close {
            position:absolute; top:20px; right:20px;
            width:40px; height:40px; background:var(--medium-gray);
            border:none; border-radius:50%; color:var(--white);
            font-size:1.2rem; cursor:pointer; transition:all 0.3s ease;
            display:flex; align-items:center; justify-content:center;
        }
        .modal-close:hover { background:var(--primary-red); }
        .modal-body { padding:40px; }
        .modal-body img {
            width:100%; border-radius:16px; margin-bottom:24px;
        }
        .modal-body h2 {
            font-family:'Space Grotesk',sans-serif;
            font-size:1.8rem; font-weight:700; margin-bottom:12px;
        }
        .modal-body p { color:var(--light-gray); margin-bottom:16px; }
        .modal-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
        .modal-tags span {
            padding:6px 14px; background:rgba(255,30,30,0.1);
            color:var(--primary-red); border-radius:20px;
            font-size:0.8rem; font-weight:500;
        }
        .modal-btn {
            display:inline-flex; align-items:center; gap:10px;
            padding:14px 32px; background:var(--primary-red);
            color:var(--white); text-decoration:none; border-radius:12px;
            font-weight:600; transition:all 0.3s ease;
        }
        .modal-btn:hover { box-shadow:var(--glow-red); transform:translateY(-2px); }

        /* Responsive */
        @media (max-width:1024px) {
            .about-grid, .contact-grid { grid-template-columns:1fr; }
            .footer-grid { grid-template-columns:1fr 1fr; }
            .process-timeline::before { left:30px; }
            .process-step, .process-step:nth-child(even) { flex-direction:row; }
            .process-step:nth-child(even) .process-content { text-align:left; }
            .process-content { padding-left:80px; padding-right:0; }
            .process-number { left:30px; transform:translateX(-50%); }
            .pricing-card.featured { transform:scale(1); }
            .pricing-card.featured:hover { transform:scale(1) translateY(-10px); }
        }
        @media (max-width:768px) {
            .nav-links { display:none; }
            .mobile-toggle { display:flex; }
            .hero-mockups { display:none; }
            .portfolio-grid { grid-template-columns:1fr; }
            .footer-grid { grid-template-columns:1fr; }
            .footer-bottom { flex-direction:column; text-align:center; }
            section { padding:60px 5%; }
            .process-timeline::before { left:20px; }
            .process-icon { width:50px; height:50px; font-size:1.1rem; }
            .process-content { padding-left:60px; }
            .process-number { left:20px; }
        }
        @media (max-width:480px) {
            .hero-buttons { flex-direction:column; align-items:center; }
            .btn-primary, .btn-secondary { width:100%; justify-content:center; }
            .about-stats { grid-template-columns:1fr; }
            .services-grid { grid-template-columns:1fr; }
            .tech-grid { grid-template-columns:repeat(2,1fr); }
            .pricing-grid { grid-template-columns:1fr; }
        }

        /* Mobile Menu */
        .mobile-menu {
            position:fixed; inset:0; z-index:999;
            background:rgba(10,10,10,0.98); backdrop-filter:blur(20px);
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap:30px; opacity:0; visibility:hidden; transition:all 0.4s ease;
        }
        .mobile-menu.active { opacity:1; visibility:visible; }
        .mobile-menu a {
            color:var(--white); text-decoration:none;
            font-size:1.5rem; font-weight:600;
            transition:color 0.3s ease;
        }
        .mobile-menu a:hover { color:var(--primary-red); }
        .mobile-menu-close {
            position:absolute; top:20px; right:20px;
            background:none; border:none; color:var(--white);
            font-size:2rem; cursor:pointer;
        }