:root { --accent:#00ff99; --accent2:#00ffcc; }
    *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; font-size:16px; }
    body { background:#000; color:#fff; overflow-x:hidden; font-family:"Poppins",sans-serif; -webkit-text-size-adjust:100%; }
    img { max-width:100%; height:auto; display:block; }
    a { text-decoration:none; }

    /* NAVBAR */
    header { position:fixed; top:0; width:100%; z-index:9999; transition:all 0.3s; }
    header.scrolled { background:rgba(0,0,0,0.97)!important; backdrop-filter:blur(20px); box-shadow:0 2px 30px rgba(0,255,153,0.2); }
    nav { display:flex; justify-content:space-between; align-items:center; padding:16px 5%; background:rgba(0,0,0,0.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,255,153,0.1); }
    .logo { font-size:clamp(1rem,4vw,1.55rem); font-weight:800; color:#beded1; letter-spacing:1px; text-transform:uppercase; text-shadow:2px 2px 8px rgba(0,255,153,0.55); transition:all 0.3s; cursor:pointer; white-space:nowrap; }
    .logo:hover { color:#00ffaa; transform:scale(1.04); }
    nav ul { display:flex; gap:1.4rem; list-style:none; align-items:center; }
    nav a { color:#fff; font-size:0.93rem; font-weight:600; transition:all 0.3s; position:relative; }
    nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s; }
    nav a:hover::after { width:100%; }
    nav a:hover { color:var(--accent); text-shadow:0 0 8px var(--accent); }
    .mr-code-btn { background:orange; padding:7px 14px; border-radius:6px; color:#fff!important; font-weight:700; white-space:nowrap; }
    .mr-code-btn::after { display:none!important; }
    .mr-code-btn:hover { background:#e07b00; }
    .logo-ft { display:none; }
    .hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; z-index:10001; padding:4px; }
    .hamburger div { width:26px; height:3px; background:var(--accent); border-radius:2px; transition:all 0.25s; }
    .hamburger.active div:nth-child(1) { transform:rotate(45deg) translate(5px,6px); }
    .hamburger.active div:nth-child(2) { opacity:0; transform:scaleX(0); }
    .hamburger.active div:nth-child(3) { transform:rotate(-45deg) translate(5px,-6px); }

    /* HERO */
    .hero { position:relative; width:100%; height:100svh; min-height:520px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 20px 50px; }
    .video-bg { position:absolute; inset:0; background:#000; overflow:hidden; z-index:1; }
    .hero-video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
    .hero-overlay { position:absolute; inset:0; background:linear-gradient(160deg,rgba(0,0,0,0.65),rgba(0,15,8,0.4)); z-index:2; }
    .content { position:relative; z-index:3; width:100%; max-width:900px; display:flex; flex-direction:column; align-items:center; gap:16px; }
    .content h1 { font-size:clamp(1.9rem,6vw,4rem); line-height:1.2; text-align:center; text-shadow:2px 2px 12px rgba(0,255,153,0.5); animation:fadeInDown 0.9s ease both; }
    .content h1 .welcome-text { color:#fff; font-weight:600; }
    .content h1 .highlight { color:var(--accent); font-weight:900; }
    .typing-text { font-size:clamp(0.9rem,2.8vw,1.8rem); color:#fff; background:linear-gradient(135deg,rgba(0,0,0,0.65),rgba(0,255,153,0.1)); padding:clamp(8px,2vw,14px) clamp(12px,3vw,28px); border-radius:12px; box-shadow:0 6px 20px rgba(0,255,153,0.35); border-right:3px solid var(--accent); font-weight:700; text-shadow:1px 1px 6px rgba(0,255,153,0.35); backdrop-filter:blur(5px); animation:fadeInUp 0.9s ease 0.5s both; max-width:100%; word-break:break-word; }
    .btn-contact { display:inline-block; padding:clamp(11px,2vw,14px) clamp(22px,4vw,36px); background:linear-gradient(135deg,var(--accent),#00cc77); color:#000; font-weight:700; font-size:clamp(0.88rem,2.2vw,1rem); border-radius:50px; transition:0.3s; box-shadow:0 0 25px rgba(0,255,153,0.45); animation:fadeInUp 0.9s ease 1s both; }
    .btn-contact:hover { background:linear-gradient(135deg,#00cc77,#009955); color:#fff; transform:translateY(-3px); }
    .scroll-indicator { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; animation:bounce 2s infinite; }
    .scroll-indicator i { font-size:1.8rem; color:var(--accent); opacity:0.7; }
    @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-8px);} }
    @keyframes fadeInDown { from{opacity:0;transform:translateY(-25px);} to{opacity:1;transform:translateY(0);} }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(25px);} to{opacity:1;transform:translateY(0);} }

    /* SERVICES STRIP */
    .services { text-align:center; padding:clamp(48px,7vw,80px) 5%; background:#000; }
    .services h2 { font-size:clamp(1.5rem,4vw,2.5rem); margin-bottom:22px; }
    .line { width:100%; height:3px; background:linear-gradient(90deg,#09ff01,#000000c8,#05ff26); animation:moveLine 3s linear infinite; margin-bottom:30px; }
    @keyframes moveLine { 0%{background-position:0 0;} 100%{background-position:1000px 0;} }
    .service-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
    .service { background:#111; border:1px solid #00c46a; padding:clamp(11px,2vw,20px) clamp(16px,3vw,36px); border-radius:10px; font-size:clamp(0.82rem,2.2vw,1.05rem); transition:0.3s; cursor:default; }
    .service:hover { background:#00c46a; color:#000; transform:translateY(-4px); }

    /* VISION */
    .vision { position:relative; background:#000; padding:clamp(48px,7vw,80px) 5%; overflow:hidden; }
    .vision-bg-video { position:absolute; top:0; right:0; height:100%; width:auto; min-width:50%; z-index:0; object-fit:cover; pointer-events:none; opacity:0.2; }
    .vision-container { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1200px; margin:0 auto; z-index:1; }
    .vision-box { background:rgba(0,0,0,0.82); border-left:5px solid var(--accent); padding:18px 12px; border-radius:12px; text-align:center; transition:all 0.3s; }
    .vision-box:hover { background:rgba(0,255,100,0.1); transform:translateY(-5px) scale(1.03); box-shadow:0 10px 25px rgba(0,255,100,0.3); }
    .vision-box img { width:46px; height:46px; margin:0 auto 10px; }
    .vision-box h3 { font-size:clamp(0.9rem,1.8vw,1.25rem); font-weight:700; color:var(--accent); margin-bottom:8px; }
    .vision-box p { font-size:clamp(0.78rem,1.5vw,0.93rem); line-height:1.5; }

    /* SERVICES GRID */
    .services-section { background:#000; text-align:center; padding:clamp(55px,8vw,100px) 5%; position:relative; overflow:hidden; }
    .services-section .section-title { font-size:clamp(1.4rem,4vw,2.4rem); color:var(--accent); margin-bottom:10px; }
    .services-section .section-subtitle { font-size:clamp(0.95rem,2.2vw,1.15rem); color:#aaa; margin-bottom:8px; }
    .services-section .section-desc { color:#888; margin-bottom:38px; font-size:clamp(0.82rem,1.8vw,0.98rem); max-width:560px; margin-left:auto; margin-right:auto; }
    .services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:22px; }
    .service-card { background:rgba(0,0,0,0.75); border:1px solid var(--accent); border-radius:18px; padding:clamp(18px,3.5vw,28px); transition:all 0.4s; position:relative; overflow:hidden; }
    .service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,255,153,0.05),transparent); opacity:0; transition:opacity 0.4s; }
    .service-card:hover::before { opacity:1; }
    .service-card:hover { transform:translateY(-8px); box-shadow:0 0 28px rgba(0,255,153,0.3); }
    .icon-circle { width:68px; height:68px; border-radius:50%; border:2px solid var(--accent); margin:0 auto 16px; display:flex; justify-content:center; align-items:center; background:radial-gradient(circle,var(--accent) 10%,transparent 70%); animation:pulse 3s infinite ease-in-out; }
    .icon-circle i { font-size:1.75rem; color:var(--accent); transition:transform 0.5s; }
    .service-card:hover .icon-circle i { transform:rotate(360deg); }
    @keyframes pulse { 0%,100%{transform:scale(1);box-shadow:0 0 15px var(--accent),0 0 30px rgba(0,255,153,0.3);} 50%{transform:scale(1.15);box-shadow:0 0 30px var(--accent),0 0 60px rgba(0,255,153,0.5);} }
    .service-card h3 { font-size:clamp(0.98rem,2.2vw,1.18rem); margin-bottom:9px; }
    .service-card p { font-size:clamp(0.8rem,1.8vw,0.93rem); color:#bbb; line-height:1.6; }
    .btn-quote { display:inline-block; margin-top:36px; padding:clamp(11px,2vw,14px) clamp(22px,4vw,32px); background:linear-gradient(135deg,var(--accent),#00cc77); color:#000; border-radius:28px; font-weight:700; font-size:clamp(0.88rem,2vw,1rem); transition:all 0.3s; box-shadow:0 0 20px rgba(0,255,153,0.4); }
    .btn-quote:hover { transform:scale(1.05); box-shadow:0 0 30px rgba(0,255,153,0.6); }
    .moving-circle { position:absolute; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(0,255,153,0.3),transparent 70%); animation:openclose 5s infinite ease-in-out alternate; pointer-events:none; }
    @keyframes openclose { 0%{transform:scale(0.8);opacity:0.4;} 100%{transform:scale(1.5);opacity:0.85;} }

    /* FACT */
    .fact-section { position:relative; background:#050505; padding:clamp(48px,7vw,80px) 5%; overflow:hidden; display:flex; justify-content:center; }
    .fact-box { display:flex; flex-wrap:wrap; align-items:center; max-width:1100px; width:100%; gap:28px; }
    .fact-left,.fact-right { flex:1; min-width:min(270px,100%); }
    .fact-number { font-size:clamp(2.8rem,7vw,5rem); font-weight:800; color:var(--accent); }
    .fact-icons { display:flex; gap:14px; margin-top:14px; font-size:clamp(1.3rem,3.5vw,1.9rem); color:var(--accent); }
    .fact-title { font-size:clamp(1.2rem,3.2vw,1.9rem); margin-bottom:14px; }
    .fact-text { font-size:clamp(0.88rem,2.2vw,1.15rem); margin-bottom:12px; line-height:1.6; }
    .fact-text span { color:var(--accent); font-weight:600; }
    .fact-source { font-size:clamp(0.75rem,1.8vw,0.88rem); color:#ccc; margin-bottom:22px; }
    .fact-progress { background:#111; border-radius:12px; overflow:hidden; height:20px; }
    .progress-bar { width:0%; height:100%; background:linear-gradient(90deg,var(--accent),#00cc77); display:flex; align-items:center; justify-content:flex-end; border-radius:12px; padding-right:10px; box-sizing:border-box; transition:width 2s ease; }
    .progress-text { font-size:0.82rem; font-weight:700; color:#000; }
    .fact-circle1{top:10%;left:10%;} .fact-circle2{top:60%;left:18%;width:60px;height:60px;} .fact-circle3{top:15%;right:10%;width:90px;height:90px;} .fact-circle4{bottom:10%;right:18%;width:80px;height:80px;}

    /* TICKER */
    .moving-text-section { background:#0a0a0a; padding:18px 0; overflow:hidden; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); }
    .moving-text-wrapper { white-space:nowrap; overflow:hidden; }
    .moving-text { display:inline-block; font-weight:700; font-size:clamp(1rem,2.8vw,1.9rem); color:var(--accent); animation:scrollText 22s linear infinite; }
    .moving-text i { margin:0 8px; }
    @keyframes scrollText { 0%{transform:translateX(100vw);} 100%{transform:translateX(-100%);} }

    /* PORTFOLIO */
    .portfolio-section { background:#000; padding:clamp(48px,7vw,80px) 5%; position:relative; overflow:hidden; }
    .portfolio-section::before { content:''; position:absolute; bottom:0; left:0; width:200%; height:120px; background:#00ffcc; opacity:0.04; transform:rotate(-10deg); z-index:0; }
    .portfolio-section .container { position:relative; z-index:1; max-width:1200px; margin:0 auto; }
    .section-title h2 { color:var(--accent); font-size:clamp(1.7rem,4.5vw,2.8rem); text-align:center; margin-bottom:8px; }
    .section-title p { color:#ddd; text-align:center; font-size:clamp(0.88rem,2.2vw,1.08rem); margin-bottom:36px; }
    .portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:22px; position:relative; z-index:1; }
    .project-card { background:rgba(14,14,14,0.92); border-radius:15px; overflow:hidden; box-shadow:0 6px 20px rgba(0,255,150,0.12); transition:transform 0.4s,box-shadow 0.4s; border:1px solid rgba(0,255,153,0.12); }
    .project-card:hover { transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,255,150,0.3); border-color:rgba(0,255,153,0.38); }
    .project-card img { width:100%; height:clamp(140px,18vw,200px); object-fit:cover; border-radius:15px 15px 0 0; transition:transform 0.4s; }
    .project-card:hover img { transform:scale(1.04); }
    .project-info { padding:clamp(13px,2.5vw,20px); }
    .project-info h3 { font-size:clamp(0.98rem,2.2vw,1.22rem); color:var(--accent); margin-bottom:8px; }
    .project-info p { font-size:clamp(0.78rem,1.8vw,0.9rem); line-height:1.6; color:#ccc; margin-bottom:10px; }
    .project-tech { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
    .project-tech span { background:rgba(0,255,153,0.11); color:var(--accent); padding:3px 9px; border-radius:18px; font-size:0.7rem; border:1px solid rgba(0,255,153,0.26); transition:all 0.3s; }
    .project-tech span:hover { background:var(--accent); color:#000; }
    .project-link { display:inline-block; margin-top:10px; color:#000; background:linear-gradient(135deg,var(--accent),#00cc77); padding:8px 20px; border-radius:22px; font-weight:600; font-size:0.86rem; transition:all 0.3s; box-shadow:0 4px 14px rgba(0,255,153,0.22); }
    .project-link:hover { background:linear-gradient(135deg,#00cc77,#009955); color:#fff; transform:translateY(-2px); }

    /* MARKETING HERO */
    .marketing-hero { width:100%; min-height:100svh; background:#000; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:clamp(90px,12vw,140px) 5% clamp(50px,7vw,80px); position:relative; }
    .marketing-hero::before { content:""; position:absolute; top:0; left:0; width:100%; height:clamp(70px,12vw,140px); background:var(--accent); border-bottom-left-radius:50% 20%; border-bottom-right-radius:50% 20%; z-index:1; }
    .content-wrapper { display:flex; align-items:center; justify-content:center; width:100%; max-width:1200px; gap:clamp(24px,5vw,60px); position:relative; z-index:2; flex-wrap:wrap; }
    .marketing-video { width:min(560px,100%); height:auto; border-radius:15px; object-fit:cover; box-shadow:0 20px 60px rgba(0,0,0,0.8); flex-shrink:0; pointer-events:none; }
    .marketing-text { flex:1; min-width:min(240px,100%); text-align:left; }
    .marketing-text h2 { font-size:clamp(1.5rem,4vw,2.7rem)!important; margin-bottom:14px; color:var(--accent)!important; font-weight:900!important; }
    .marketing-text p { font-size:clamp(0.88rem,2.3vw,1.25rem); margin-bottom:22px; line-height:1.6; color:#ddd; }
    .cta-btn { display:inline-block; background:linear-gradient(135deg,var(--accent),#00cc77); color:#000; padding:clamp(11px,2vw,16px) clamp(22px,4vw,40px); border-radius:13px; font-weight:700; font-size:clamp(0.88rem,2.3vw,1.25rem); transition:all 0.3s; box-shadow:0 0 24px rgba(0,255,153,0.42); }
    .cta-btn:hover { background:linear-gradient(135deg,#00cc77,#009955); color:#fff; transform:translateY(-3px); }

    /* COLLAB */
    .collab-section { position:relative; min-height:80vh; overflow:hidden; text-align:center; display:flex; align-items:center; justify-content:center; background:#050505; padding:clamp(50px,8vw,80px) 5%; }
    .floating-icons::before,.floating-icons::after { content:""; position:absolute; border-radius:50%; background:#00ffcc22; box-shadow:0 0 80px #00ffcc55; animation:float 10s infinite alternate ease-in-out; z-index:1; }
    .floating-icons::before { width:clamp(140px,28vw,300px); height:clamp(140px,28vw,300px); top:15%; left:5%; }
    .floating-icons::after { width:clamp(180px,32vw,400px); height:clamp(180px,32vw,400px); bottom:10%; right:5%; animation-delay:2s; }
    @keyframes float { 0%{transform:translate(0,0) scale(1);opacity:0.38;} 100%{transform:translate(35px,-28px) scale(1.1);opacity:0.7;} }
    .collab-section .content { position:relative; z-index:3; padding:0 10px; width:100%; }
    .subtitle { font-size:clamp(0.8rem,2.2vw,1.15rem); letter-spacing:3px; color:#bbb; margin-bottom:10px; }
    .collab-h1 { font-weight:900; line-height:1.1; font-size:clamp(2rem,9vw,7rem); text-shadow:0 0 20px rgba(0,0,0,0.6); color:#fff; }
    .collab-h1 .green { display:block; color:var(--accent); }
    .collab-cta { display:inline-block; margin-top:24px; background:var(--accent2); color:#000; padding:clamp(12px,2vw,17px) clamp(26px,5vw,44px); border-radius:50px; font-weight:700; font-size:clamp(0.92rem,2.3vw,1.18rem); transition:all 0.3s; box-shadow:0 0 24px #00ffcc77; }
    .collab-cta:hover { background:#00e6b8; transform:scale(1.06); box-shadow:0 0 40px #00ffccaa; }
    .collab-cta i { margin-left:6px; }

    /* ===== FOOTER ===== */
    .footer {
      position: relative;
      width: 100%;
      background: #050505;
      overflow: hidden;
      font-family: "Poppins", sans-serif;
    }

    /* Glowing top border */
    .footer::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent);
      z-index: 3;
    }

    /* Ambient background circles */
    .bg-circles {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 60% 50% at 15% 40%, rgba(0,255,153,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 85% 60%, rgba(0,255,204,0.05) 0%, transparent 70%);
      animation: moveCircles 12s ease-in-out infinite alternate;
    }
    @keyframes moveCircles { 0%{transform:translate(0,0);} 100%{transform:translate(18px,-14px);} }

    /* CTA top band */
    .footer-cta-band {
      position: relative; z-index: 2;
      text-align: center;
      padding: clamp(40px,6vw,70px) clamp(20px,6vw,60px) clamp(36px,5vw,60px);
      border-bottom: 1px solid rgba(0,255,153,0.1);
    }
    .footer-cta-band .footer-logo {
      width: clamp(70px,10vw,110px);
      height: clamp(70px,10vw,110px);
      border-radius: 50%;
      border: 2px solid rgba(0,255,153,0.35);
      padding: 5px;
      margin: 0 auto 20px;
      display: block;
      object-fit: cover;
      background: #000;
      box-shadow: 0 0 24px rgba(0,255,153,0.18);
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .footer-cta-band .footer-logo:hover {
      box-shadow: 0 0 40px rgba(0,255,153,0.4);
      transform: scale(1.05);
    }
    .footer-cta-band h2 {
      font-size: clamp(1.3rem,3.5vw,2rem);
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: -0.3px;
    }
    .footer-cta-band p {
      font-size: clamp(0.85rem,2vw,1rem);
      color: #999;
      margin-bottom: 22px;
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }
    .footer-cta-band .footer-email-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: clamp(11px,2vw,13px) clamp(24px,4vw,32px);
      background: linear-gradient(135deg, var(--accent), #00cc77);
      color: #000;
      font-weight: 700;
      font-size: clamp(0.85rem,2vw,0.95rem);
      border-radius: 50px;
      transition: all 0.3s;
      box-shadow: 0 0 20px rgba(0,255,153,0.3);
      letter-spacing: 0.3px;
    }
    .footer-cta-band .footer-email-btn:hover {
      background: linear-gradient(135deg,#00cc77,#009955);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 0 35px rgba(0,255,153,0.55);
    }

    /* Main footer grid */
    .footer-main {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px,4vw,50px);
      max-width: 1100px;
      margin: 0 auto;
      padding: clamp(36px,5vw,56px) clamp(20px,5vw,40px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .footer-col h4 {
      font-size: clamp(0.88rem,2vw,0.98rem);
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 18px;
      position: relative;
      padding-bottom: 10px;
    }
    .footer-col h4::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 28px; height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }
    .footer-col { text-align: center; }
    .footer-col ul { list-style: none; padding: 0; }
    .footer-col ul li { margin: 9px 0; }
    .footer-col ul li a {
      color: #aaa;
      font-size: clamp(0.82rem,1.8vw,0.9rem);
      transition: all 0.25s;
      display: inline-block;
    }
    .footer-col ul li a:hover { color: var(--accent); transform: translateX(4px); }

    /* Social icons row */
    .footer-social-icons {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .footer-social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(0,255,153,0.25);
      background: rgba(0,255,153,0.04);
      color: #bbb;
      font-size: 1.15rem;
      transition: all 0.3s;
    }
    .footer-social-icons a:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #000;
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,255,153,0.35);
    }

    /* Bottom bar */
    .footer-bottom {
      position: relative; z-index: 2;
      text-align: center;
      padding: clamp(14px,3vw,20px) clamp(20px,5vw,40px);
    }
    .footer-bottom p {
      font-size: clamp(0.72rem,1.8vw,0.82rem);
      color: #555;
      letter-spacing: 0.3px;
    }
    .footer-bottom span { color: var(--accent); }

    /* Mobile footer */
    @media (max-width: 768px) {
      .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 24px;
        text-align: center;
      }
      .footer-col h4::after { left: 50%; transform: translateX(-50%); }
      .footer-col ul li a:hover { transform: none; }
    }

    /* MODALS */
    .modal { display:none; position:fixed; z-index:99999; inset:0; overflow:auto; background:rgba(0,0,0,0.82); animation:fadeIn 0.4s; }
    .modal-content { background:#000; color:var(--accent2); margin:clamp(5%,8vh,12%) auto; padding:clamp(18px,4vw,28px); border:2px solid var(--accent2); width:90%; max-width:460px; text-align:center; border-radius:14px; animation:slideIn 0.4s; box-shadow:0 0 40px rgba(0,255,204,0.22); }
    .modal-content h2 { margin-bottom:11px; font-size:clamp(1rem,3vw,1.35rem); }
    .modal-content p { color:#aaa; margin-bottom:16px; font-size:clamp(0.82rem,2vw,0.93rem); }
    .modal-content a.btn { display:inline-block; padding:10px 22px; background:var(--accent2); color:#000; border-radius:22px; font-weight:700; transition:0.3s; }
    .modal-content a.btn:hover { background:#00cc77; color:#fff; }
    .close { color:var(--accent2); float:right; font-size:25px; font-weight:700; cursor:pointer; line-height:1; }
    .close:hover { color:#fff; }
    @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
    @keyframes slideIn { from{transform:translateY(-35px);opacity:0;} to{transform:translateY(0);opacity:1;} }

    /* TABLET */
    @media (max-width:1024px) {
      .vision-container { grid-template-columns:repeat(2,1fr); }
      .content-wrapper { flex-direction:column; align-items:center; text-align:center; gap:28px; }
      .marketing-video { width:min(480px,100%); }
      .marketing-text { text-align:center; min-width:0; }
    }

    /* MOBILE */
    @media (max-width:768px) {
      .hamburger { display:flex; }
      nav ul {
        position:fixed; top:0; right:-280px; width:280px; height:100dvh;
        background:rgba(0,0,0,0.98); flex-direction:column; gap:0;
        padding:65px 0 30px; border-left:2px solid var(--accent);
        transition:right 0.26s ease; z-index:9998; overflow-y:auto;
      }
      nav ul li { width:100%; }
      nav ul li a { display:block; padding:13px 22px; font-size:1rem; border-bottom:1px solid rgba(0,255,153,0.08); }
      nav ul li a::after { display:none; }
      nav ul.show { right:0; }
      .logo-ft { display:block; text-align:center; font-size:1.3rem; font-weight:700; color:var(--accent); padding:18px; border-top:1px solid rgba(0,255,153,0.1); }

      .hero { padding:80px 16px 45px; height:100svh; }
      .content h1 .highlight { display:inline; }
      .typing-text { white-space:normal; text-align:center; border-right:none; border-bottom:3px solid var(--accent); }

      .services { padding:42px 16px; }
      .service-list { gap:9px; }
      .service { padding:11px 16px; font-size:0.82rem; flex:0 0 calc(50% - 5px); text-align:center; box-sizing:border-box; }

      .vision { padding:42px 16px; }
      .vision-bg-video { display:none; }
      .vision-container { grid-template-columns:1fr 1fr; gap:11px; }

      .services-section { padding:42px 16px; }
      .services-grid { grid-template-columns:1fr; gap:16px; }

      .fact-section { padding:42px 16px; }
      .fact-box { flex-direction:column; text-align:center; }
      .fact-icons { justify-content:center; }

      .portfolio-section { padding:42px 16px; }
      .portfolio-grid { grid-template-columns:1fr; gap:16px; }

      .marketing-hero { padding:90px 16px 45px; min-height:auto; }
      .marketing-hero::before { height:70px; }
      .content-wrapper { flex-direction:column; gap:20px; }
      .marketing-video { width:100%; border-radius:12px; }
      .marketing-text { width:100%; text-align:center; }

      .collab-section { min-height:auto; padding:55px 16px 60px; }

      .footer { padding:5px 16px 0; }
      .footer-links-container { flex-direction:column; gap:22px; align-items:center; }
      .footer-links,.footer-legal,.footer-social { width:100%; max-width:240px; }
    }

    /* SMALL MOBILE */
    @media (max-width:400px) {
      nav { padding:13px 14px; }
      .logo { font-size:0.95rem; letter-spacing:0.3px; }
      .hero { padding:72px 12px 38px; }
      .vision-container { grid-template-columns:1fr; }
      .service { flex:0 0 100%; }
      .typing-text { font-size:0.85rem; padding:7px 11px; }
      .btn-contact { padding:10px 20px; font-size:0.84rem; }
      .collab-h1 { font-size:clamp(1.8rem,8vw,2.8rem); }
    }

    /* SAFE AREA (iPhone notch/home bar) */
    @supports (padding:env(safe-area-inset-bottom)) {
      .footer-overlay { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
      a[aria-label="Contact us on WhatsApp"] { bottom:calc(18px + env(safe-area-inset-bottom))!important; }
    }