/* Reset and base styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f172a; background: #ffffff; }
img { max-width: 100%; height: auto; display: block; }

:root {
  --primary: #0a84ff;
  --primary-600: #0066cc;
  --bg-alt: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(2,6,23,0.08);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section.alt { background: var(--bg-alt); }
.section h2 { margin: 0 0 12px; font-size: 36px; }
.section .section-intro { margin: 0 0 32px; color: var(--muted); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; }
/* Use real logo image */
.brand-logo {
    width: 225px;
    height: 60px; border-radius: 10px; background: transparent url('https://callsoft.in/wp-content/uploads/2023/02/logoCallsoft.png') center/contain no-repeat; display: inline-block; box-shadow: var(--shadow); text-indent: -9999px; overflow: hidden; }
.brand-name { display: none; }

.nav-toggle { display: none; background: transparent; border: 0; font-size: 22px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.site-nav a, .submenu-toggle { text-decoration: none; color: #0f172a; padding: 10px 12px; border-radius: 10px; transition: background 0.2s; }
.site-nav a:hover, .submenu-toggle:hover { background: #f1f5f9; }
.has-submenu { position: relative; }
.submenu { position: absolute; top: 120%; left: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none; flex-direction: column; min-width: 240px; }
.has-submenu.open .submenu { display: flex; }
/* Active link */
.site-nav a.active { background: #e2e8f0; font-weight: 700; }
/* Desktop hover open disabled: submenu opens only on click */
@media (min-width: 721px) { .site-nav .submenu { top: calc(100% + 8px); } }

/* Buttons */
.btn { display: inline-block; padding: 12px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-600); }
.btn-outline { border-color: #cbd5e1; color: #0f172a; }
.btn-outline:hover { background: #f1f5f9; }

/* Hero */
.hero { background: linear-gradient(135deg, #eff6ff, #ffffff); padding: 96px 0 72px; }
.hero h1 { font-size: 44px; margin: 0 0 8px; letter-spacing: -0.5px; }
.subtitle { color: var(--primary-600); font-weight: 700; margin: 0 0 8px; }
.lead { color: var(--muted); font-size: 18px; max-width: 760px; }
.hero-cta { margin-top: 24px; display: flex; gap: 12px; }

/* Cards and grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,0.12); }

/* Features */
.features .feature { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }

/* Testimonials */
.quote { background: #fff; border-left: 4px solid var(--primary); padding: 16px; border-radius: 8px; box-shadow: var(--shadow); }
.quote footer { margin-top: 6px; color: #var(--muted); }

/* Brands */
.brand-list { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 0; margin: 0; list-style: none; }
.brand-list li { padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 10px; }

/* Footer */
.site-footer { background: #0b1220; color: #e2e8f0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; padding: 40px 0; }
.brand-footer .brand-logo { background: transparent url('https://callsoft.in/wp-content/uploads/2023/02/logoCallsoft.png') center/contain no-repeat; }
.footer-links, .contact-list { list-style: none; padding: 0; margin: 0; }
.footer-links a { color: #cbd5e1; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid #243047; padding: 14px 0; color: #94a3b8; }
/* Append 200 cities as last line */
.footer-bottom::after { content: 'New York, London, Tokyo, Paris, Singapore, Hong Kong, Dubai, Sydney, Melbourne, Los Angeles, San Francisco, Chicago, Toronto, Vancouver, Montreal, Boston, Washington, Miami, Seattle, Dallas, Houston, Atlanta, Philadelphia, Barcelona, Madrid, Lisbon, Porto, Berlin, Munich, Frankfurt, Hamburg, Cologne, Stuttgart, Amsterdam, Rotterdam, The Hague, Brussels, Antwerp, Zurich, Geneva, Basel, Vienna, Salzburg, Prague, Budapest, Warsaw, Krakow, Wroclaw, Copenhagen, Aarhus, Stockholm, Gothenburg, Oslo, Helsinki, Tallinn, Riga, Vilnius, Reykjavik, Dublin, Belfast, Edinburgh, Glasgow, Manchester, Birmingham, Leeds, Liverpool, Bristol, Cardiff, Lyon, Marseille, Nice, Toulouse, Bordeaux, Lille, Nantes, Strasbourg, Milan, Rome, Naples, Turin, Florence, Bologna, Venice, Verona, Palermo, Pisa, Athens, Thessaloniki, Istanbul, Ankara, Izmir, Antalya, Abu Dhabi, Doha, Muscat, Riyadh, Jeddah, Dammam, Kuwait City, Manama, Cairo, Alexandria, Giza, Casablanca, Rabat, Marrakech, Tunis, Algiers, Nairobi, Mombasa, Johannesburg, Cape Town, Pretoria, Durban, Lagos, Abuja, Accra, Kumasi, Addis Ababa, Kigali, Kampala, Dar es Salaam, Harare, Lusaka, Maputo, Dakar, Abidjan, Monrovia, Freetown, Bamako, Ouagadougou, Lome, Cotonou, Port Louis, Antananarivo, Beijing, Shanghai, Shenzhen, Guangzhou, Chengdu, Chongqing, Hangzhou, Nanjing, Wuhan, Xi\'an, Tianjin, Suzhou, Qingdao, Dalian, Shenyang, Taipei, Kaohsiung, Taichung, Seoul, Busan, Incheon, Osaka, Kyoto, Yokohama, Nagoya, Fukuoka, Sapporo, Hiroshima, Sendai, Kuala Lumpur, Penang, Johor Bahru, Bangkok, Chiang Mai, Phuket, Hanoi, Ho Chi Minh City, Da Nang, Phnom Penh, Siem Reap, Vientiane, Yangon, Mandalay, Manila, Cebu, Davao, Jakarta, Surabaya, Denpasar, Yogyakarta, Bandar Seri Begawan, Ulaanbaatar, New Delhi, Mumbai, Bengaluru, Hyderabad, Chennai, Kolkata, Pune, Ahmedabad, Jaipur, Surat, Noida, Gurugram, Lucknow, Kanpur, Indore, Bhopal, Chandigarh, Kochi, Thiruvananthapuram, Coimbatore, Madurai, Visakhapatnam, Vijayawada, Nagpur, Patna, Ranchi, Bhubaneswar, Guwahati, Auckland, Wellington, Christchurch, Brisbane, Perth, Adelaide, Canberra, Gold Coast, Hobart, Mexico City, Guadalajara, Monterrey, Tijuana, Cancun, Panama City, San Jose, Guatemala City, San Salvador, Tegucigalpa, Managua, Havana, Santiago, Valparaiso, Buenos Aires, Cordoba, Rosario, Mendoza, Montevideo, Asuncion, La Paz, Santa Cruz, Sucre, Lima, Arequipa, Cusco, Bogota, Medellin, Cali, Cartagena, Quito, Guayaquil, Caracas, Maracaibo, Kingston, Nassau, Santo Domingo, Port of Spain, San Juan, Tel Aviv, Jerusalem, Amman, Beirut, Baghdad, Erbil, Tehran, Shiraz, Isfahan, Lahore, Karachi, Islamabad, Peshawar, Dhaka, Chittagong, Sylhet, Colombo, Kandy, Male, Almaty, Astana, Tashkent, Bishkek, Dushanbe, Baku, Yerevan, Tbilisi, Kyiv, Lviv, Odesa, Kharkiv, Moscow, Saint Petersburg, Kazan, Sochi, Novosibirsk, Yekaterinburg, Luxembourg City, Monaco, San Marino, Andorra la Vella, Valletta, Nicosia, Ljubljana, Zagreb, Belgrade, Sarajevo, Skopje, Podgorica, Tirana, Bucharest, Cluj-Napoca, Sofia, Plovdiv, Chisinau'; display: block; font-size: 6px; margin-top: 6px; color: #94a3b8; }

/* Responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .site-nav { width: 100%; display: none; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; }
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 72px 0 48px; }
  .hero h1 { font-size: 34px; }
}