/* ========================================
   LUMA XR - Global Tech Brand
   Professional Interactive Solutions
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --black: #0C0C1D;
  --dark: #151528;
  --navy: #1E1E3F;
  --blue: #2563EB;
  --blue-light: #3B82F6;
  --cyan: #06B6D4;
  --accent: #8B5CF6;
  --white: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-900: #0F172A;
  --green: #10B981;
  --orange: #F59E0B;
  --red: #EF4444;
  --gradient-hero: linear-gradient(135deg, #0C0C1D 0%, #1E1E3F 50%, #2563EB 100%);
  --gradient-blue: linear-gradient(135deg, #2563EB, #06B6D4);
  --gradient-purple: linear-gradient(135deg, #8B5CF6, #EC4899);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 40px rgba(37,99,235,0.15);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--white); color:var(--gray-900); line-height:1.6; -webkit-font-smoothing:antialiased; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(12,12,29,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.06); height:72px; }
.navbar .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-icon { width:52px; height:52px; background:linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #06B6D4 100%); border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px; color:white; letter-spacing:-1px; box-shadow:0 4px 24px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.1); }
.logo-text { font-size:24px; font-weight:800; color:var(--white); letter-spacing:-0.5px; }
.logo-text span { background:linear-gradient(135deg, #60A5FA 0%, #22D3EE 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { color:var(--gray-400); text-decoration:none; font-size:15px; font-weight:500; transition:var(--transition); position:relative; }
.nav-links a:hover { color:var(--white); }
.nav-links a.active { color:var(--white); }
.nav-actions { display:flex; align-items:center; gap:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 28px; border-radius:10px; font-size:15px; font-weight:600; transition:var(--transition); border:none; cursor:pointer; text-decoration:none; letter-spacing:0.2px; }
.btn-primary { background:var(--gradient-blue); color:white; box-shadow:0 4px 15px rgba(37,99,235,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,99,235,0.4); }
.btn-secondary { background:rgba(255,255,255,0.08); color:var(--white); border:1px solid rgba(255,255,255,0.12); }
.btn-secondary:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); }
.btn-green { background:var(--green); color:white; box-shadow:0 4px 15px rgba(16,185,129,0.3); }
.btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(16,185,129,0.4); }
.btn-outline { background:transparent; color:var(--blue); border:2px solid var(--blue); }
.btn-outline:hover { background:var(--blue); color:white; }
.btn-lg { padding:16px 36px; font-size:16px; }
.btn-sm { padding:8px 20px; font-size:14px; }
.lang-toggle { background:rgba(255,255,255,0.06); color:var(--gray-400); border:1px solid rgba(255,255,255,0.1); padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:var(--transition); }
.lang-toggle:hover { color:var(--white); border-color:rgba(255,255,255,0.2); }

/* ===== HERO ===== */
.hero { background:#0C0C1D; background:linear-gradient(135deg, #0C0C1D 0%, #1E1E3F 50%, #2563EB 100%); min-height:100vh; padding-top:72px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:0.5; }
.hero-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; min-height:calc(100vh - 72px); padding:60px 0; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; background:rgba(37,99,235,0.15); border:1px solid rgba(37,99,235,0.25); color:#60A5FA; padding:10px 20px; border-radius:100px; font-size:13px; font-weight:600; letter-spacing:0.5px; margin-bottom:28px; backdrop-filter:blur(10px); }
.hero-badge i { color:#34D399; }
.hero-title { font-size:clamp(40px,5.5vw,64px); font-weight:900; line-height:1.08; color:var(--white); margin-bottom:24px; letter-spacing:-1px; }
.hero-title .gradient-text { background:linear-gradient(135deg, #60A5FA, #34D399); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:18px; color:var(--gray-400); line-height:1.8; margin-bottom:36px; max-width:520px; }
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:48px; margin-top:48px; padding-top:36px; border-top:1px solid rgba(255,255,255,0.08); }
.hero-stat-number { font-size:32px; font-weight:800; background:var(--gradient-blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-stat-label { font-size:14px; color:var(--gray-500); margin-top:4px; }
.hero-image { position:relative; }
.hero-image img { width:100%; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); object-fit:cover; height:440px; }
.hero-image::after { content:''; position:absolute; inset:-20px; background:var(--gradient-blue); border-radius:var(--radius-xl); opacity:0.15; filter:blur(40px); z-index:-1; }

/* Floating orbs */
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.4; z-index:0; }
.orb-1 { width:400px; height:400px; background:var(--blue); top:-100px; right:-100px; opacity:0.15; }
.orb-2 { width:300px; height:300px; background:var(--accent); bottom:-50px; left:-50px; opacity:0.1; }

/* ===== TRUST BAR ===== */
.trust-bar { background:var(--black); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); padding:20px 0; }
.trust-grid { display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; color:var(--gray-400); font-size:14px; font-weight:500; }
.trust-item svg { width:18px; height:18px; color:var(--green); flex-shrink:0; }

/* ===== SECTIONS ===== */
.section { padding:100px 0; }
.section-dark { background:var(--black); }
.section-gray { background:var(--gray-50); }
.section-header { text-align:center; max-width:640px; margin:0 auto 64px; }
.section-label { display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:white; padding:8px 20px; border-radius:100px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; }
.section-title { font-size:clamp(30px,4vw,42px); font-weight:800; margin-bottom:16px; line-height:1.15; letter-spacing:-0.5px; }
.section-title.white { color:var(--white); }
.section-desc { font-size:18px; color:var(--gray-500); line-height:1.7; max-width:560px; margin:0 auto; }

/* ===== SERVICE CARDS ===== */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.service-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); text-decoration:none; display:block; color:inherit; position:relative; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-blue); transform:scaleX(0); transition:var(--transition); }
.service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card:hover::before { transform:scaleX(1); }
.service-card-image { width:100%; height:220px; object-fit:cover; transition:var(--transition); }
.service-card:hover .service-card-image { transform:scale(1.05); }
.service-card-body { padding:28px; }
.service-card-title { font-size:20px; font-weight:700; margin-bottom:8px; color:var(--gray-900); }
.service-card-desc { font-size:15px; color:var(--gray-500); line-height:1.6; }
.service-card-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-top:1px solid var(--gray-100); }
.service-card-price { font-size:14px; color:var(--gray-400); }
.service-card-link { font-size:14px; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:4px; }

/* ===== STEPS ===== */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.step-card { text-align:center; padding:48px 32px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); position:relative; transition:var(--transition); }
.step-card:hover { border-color:var(--blue); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.step-number { width:64px; height:64px; background:var(--gradient-blue); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:0 auto 24px; box-shadow:0 8px 25px rgba(37,99,235,0.3); }
.step-title { font-size:22px; font-weight:700; margin-bottom:12px; }
.step-desc { font-size:15px; color:var(--gray-500); line-height:1.7; }

/* ===== FEATURES ===== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.feature-card { padding:36px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); transition:var(--transition); }
.feature-card:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-4px); }
.feature-icon { width:56px; height:56px; background:var(--gradient-blue); border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; margin-bottom:24px; box-shadow:0 8px 20px rgba(37,99,235,0.25); }
.feature-title { font-size:20px; font-weight:700; margin-bottom:12px; }
.feature-desc { font-size:15px; color:var(--gray-500); line-height:1.7; }

/* ===== CLIENTS ===== */
.clients-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; }
.client-card { text-align:center; padding:36px 20px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); transition:var(--transition); }
.client-card:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-4px); }
.client-icon { width:56px; height:56px; background:var(--gray-100); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--blue); font-size:24px; }
.client-title { font-size:15px; font-weight:600; color:var(--gray-900); }

/* ===== CTA ===== */
.cta-section { background:linear-gradient(135deg, #0C0C1D 0%, #1E1E3F 50%, #2563EB 100%); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:0.5; }
.cta-section .container { position:relative; z-index:1; }
.cta-title { font-size:clamp(32px,4.5vw,48px); font-weight:900; color:var(--white); margin-bottom:16px; }
.cta-desc { font-size:18px; color:rgba(255,255,255,0.7); margin-bottom:40px; max-width:500px; margin-left:auto; margin-right:auto; }

/* ===== LANDING PAGE (Service Detail) ===== */
.landing-hero { background:#0C0C1D; background:linear-gradient(135deg, #0C0C1D 0%, #1E1E3F 50%, #2563EB 100%); min-height:80vh; padding-top:72px; position:relative; overflow:hidden; }
.landing-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; padding:80px 0; position:relative; z-index:1; }
.landing-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.3); color:var(--orange); padding:8px 18px; border-radius:100px; font-size:13px; font-weight:700; margin-bottom:20px; }
.landing-title { font-size:clamp(36px,4.5vw,52px); font-weight:900; color:#FFFFFF; line-height:1.1; margin-bottom:20px; letter-spacing:-1px; }
.landing-subtitle { font-size:18px; color:#94A3B8; line-height:1.8; margin-bottom:32px; max-width:500px; }
.landing-features { list-style:none; margin:24px 0; }
.landing-features li { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:16px; color:#CBD5E1; }
.landing-features .check { width:22px; height:22px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:12px; flex-shrink:0; }
.landing-image img { width:100%; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); object-fit:cover; height:400px; }

/* Video section */
.video-section { padding:80px 0; background:var(--gray-50); }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.video-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.video-header { padding:20px 24px; border-bottom:1px solid var(--gray-100); }
.video-title { font-size:18px; font-weight:700; }
.video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* ===== PRICING CARDS (PROFESSIONAL) ===== */
.pricing-section { padding:80px 0; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:900px; margin:0 auto; }
.pricing-card { background:var(--white); border-radius:var(--radius-xl); overflow:hidden; transition:var(--transition); position:relative; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.pricing-card.buy { border:2px solid var(--green); }
.pricing-card.rent { border:2px solid var(--blue); }
.pricing-header { padding:36px 36px 24px; text-align:center; position:relative; }
.pricing-card.buy .pricing-header { background:linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.1)); }
.pricing-card.rent .pricing-header { background:linear-gradient(135deg, rgba(37,99,235,0.05), rgba(37,99,235,0.1)); }
.pricing-icon { width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:28px; }
.pricing-card.buy .pricing-icon { background:var(--green); color:white; box-shadow:0 8px 25px rgba(16,185,129,0.3); }
.pricing-card.rent .pricing-icon { background:var(--blue); color:white; box-shadow:0 8px 25px rgba(37,99,235,0.3); }
.pricing-title { font-size:26px; font-weight:800; margin-bottom:8px; }
.pricing-desc { font-size:15px; color:var(--gray-500); line-height:1.6; }
.pricing-body { padding:0 36px 36px; }
.pricing-list { list-style:none; }
.pricing-list li { display:flex; align-items:center; gap:12px; padding:12px 0; font-size:15px; color:var(--gray-600); border-bottom:1px solid var(--gray-100); }
.pricing-list li:last-child { border-bottom:none; }
.pricing-list .icon-check { width:20px; height:20px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:10px; flex-shrink:0; }
.pricing-footer { padding:0 36px 36px; }
.pricing-footer .btn { width:100%; }

/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:start; }
.contact-info h3 { font-size:28px; font-weight:800; margin-bottom:12px; }
.contact-info > p { color:var(--gray-500); margin-bottom:40px; font-size:16px; }
.contact-item { display:flex; align-items:flex-start; gap:18px; margin-bottom:28px; }
.contact-icon-box { width:52px; height:52px; background:var(--gray-100); border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:20px; flex-shrink:0; }
.contact-detail strong { display:block; font-size:15px; font-weight:700; margin-bottom:2px; color:var(--gray-900); }
.contact-detail span { font-size:15px; color:var(--gray-500); }
.contact-form-wrap { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-xl); padding:48px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:14px; font-weight:600; color:var(--gray-600); margin-bottom:8px; }
.form-control { width:100%; padding:14px 18px; border:1.5px solid var(--gray-200); border-radius:10px; font-size:15px; font-family:inherit; color:var(--gray-900); transition:var(--transition); background:var(--gray-50); }
.form-control:focus { outline:none; border-color:var(--blue); background:var(--white); box-shadow:0 0 0 4px rgba(37,99,235,0.08); }
.form-control::placeholder { color:var(--gray-400); }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
textarea.form-control { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ===== FOOTER ===== */
.footer { background:#080816; padding:80px 0 32px; border-top:1px solid rgba(255,255,255,0.08); }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:64px; margin-bottom:64px; }
.footer-brand .logo-text { color:var(--white); }
.footer-brand p { color:#B0B8C9; font-size:15px; line-height:1.7; margin-top:16px; }
.footer-title { font-size:15px; font-weight:700; color:#FFFFFF; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:24px; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:16px; }
.footer-links a { color:#B0B8C9; text-decoration:none; font-size:15px; font-weight:500; transition:var(--transition); }
.footer-links a:hover { color:#60A5FA; }
.footer-contact { list-style:none; }
.footer-contact li { color:#B0B8C9; font-size:15px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.footer-contact svg { color:#3B82F6; flex-shrink:0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:32px; text-align:center; color:#6B7280; font-size:14px; }

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:28px; right:28px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(37,211,102,0.4); z-index:999; transition:var(--transition); text-decoration:none; }
.whatsapp-float:hover { transform:scale(1.1) rotate(-5deg); }
.whatsapp-float svg { width:30px; height:30px; color:white; }

/* Responsive */
@media(max-width:1024px){
  .nav-links{display:none;}
  .hero-grid,.landing-grid,.contact-grid{grid-template-columns:1fr;gap:48px;}
  .pricing-grid{grid-template-columns:1fr;max-width:500px;}
  .steps-grid{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:48px;}
}
@media(max-width:768px){
  .section{padding:64px 0;}
  .hero-stats{flex-direction:column;gap:20px;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:40px;}
  .hero-image::after{display:none;}
}

/* Filter Tabs */
.filter-tabs{display:flex; gap:12px; justify-content:center; margin-bottom:48px; flex-wrap:wrap;}
.filter-tab{padding:10px 24px; border-radius:100px; font-size:14px; font-weight:600; border:1.5px solid var(--gray-200); background:var(--white); color:var(--gray-500); cursor:pointer; transition:var(--transition);}
.filter-tab:hover{border-color:var(--blue); color:var(--blue);}
.filter-tab.active{background:var(--blue); color:var(--white); border-color:var(--blue);}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.fade-in-up{animation:fadeInUp 0.6s ease forwards;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.float{animation:float 3s ease-in-out infinite;}