/* ===== PinFinder Design System ===== */
:root {
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --accent: #a855f7;
  --accent-light: #c084fc;
  --bg: #0f0f1a;
  --bg-card: #1a1a2e;
  --bg-card-hover: #222240;
  --bg-input: #16162a;
  --surface: #252542;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --border: #2d2d50;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;
  --container: 1200px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--primary-light);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-light)}
img{max-width:100%;display:block}
ul{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;border:none;outline:none}
table{border-collapse:collapse;width:100%}

/* ===== Utilities ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.text-center{text-align:center}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:0.8rem;font-weight:600;letter-spacing:0.03em}
.badge-primary{background:rgba(99,102,241,0.15);color:var(--primary-light)}
.badge-success{background:rgba(34,197,94,0.15);color:var(--success)}
.badge-warning{background:rgba(245,158,11,0.15);color:var(--warning)}

/* ===== Navbar ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background var(--transition),box-shadow var(--transition)}
.site-header.scrolled{background:rgba(15,15,26,0.92);backdrop-filter:blur(16px);box-shadow:0 2px 20px rgba(0,0,0,0.3)}
.navbar{padding:16px 0}
.navbar-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text)}
.logo:hover{color:var(--text)}
.logo-icon{width:36px;height:36px}
.logo-highlight{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{font-size:0.95rem;font-weight:500;color:var(--text-muted);transition:color var(--transition);position:relative}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;transition:width var(--transition)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;cursor:pointer;padding:4px}
.hamburger-line{width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}

/* ===== Hero ===== */
/* ===== Hero ===== */
.hero { padding: 100px 0 30px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%); pointer-events: none; }
.hero-badge { margin-bottom: 20px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
.hero p { font-size: clamp(0.95rem, 2vw, 1.15rem); color: var(--text-muted); max-width: 650px; margin: 0 auto 24px; line-height: 1.5; }

/* ===== Search Section ===== */
.search-section { padding: 0 0 60px; position: relative; z-index: 2; }
.search-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; max-width: 720px; margin: 0 auto; box-shadow: var(--shadow-lg); }
.search-tabs { display: flex; gap: 6px; margin-bottom: 24px; background: var(--bg-input); border-radius: var(--radius); padding: 5px; }
.search-tab { flex: 1; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: transparent; cursor: pointer; transition: var(--transition); text-align: center; border: none; }
.search-tab:hover { color: var(--text); }
.search-tab.active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.search-form { display: flex; gap: 12px; flex-wrap: wrap; }
.search-input-wrapper { flex: 1; min-width: 280px; position: relative; }
.search-input { width: 100%; padding: 14px 20px 14px 50px; background: var(--bg-input); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 1rem; transition: var(--transition); }
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
.search-input::placeholder { color: var(--text-dim); }
.search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.search-btn { flex: 0 0 auto; width: 100%; max-width: 160px; padding: 14px 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: var(--transition); border: none; white-space: nowrap; }
@media (max-width: 580px) {
    .search-btn { max-width: 100%; flex: 1 0 100%; }
}
.search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4); }
.search-btn:active { transform: translateY(0); }

/* ===== Popular Section ===== */
.popular-section{padding:0 0 80px}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-bottom:12px}
.section-header p{color:var(--text-muted);max-width:500px;margin:0 auto}
.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.popular-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);cursor:pointer;text-decoration:none;color:var(--text)}
.popular-card:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow);color:var(--text)}
.popular-card .pin{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--primary-light)}
.popular-card .city{font-size:0.85rem;color:var(--text-muted)}

/* ===== Features ===== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.feature-card{padding:32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition)}
.feature-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow)}
.feature-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:1.5rem;background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(168,85,247,0.15))}
.feature-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:10px}
.feature-card p{color:var(--text-muted);font-size:0.92rem;line-height:1.7}

/* ===== Results Page ===== */
.results-header{padding:120px 0 40px;text-align:center}
.results-header h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:12px}
.results-header p{color:var(--text-muted);font-size:1.05rem}
.results-breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-dim);margin-bottom:32px;flex-wrap:wrap}
.results-breadcrumb a{color:var(--text-muted)}
.results-breadcrumb span{color:var(--text-dim)}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px}
.info-card{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.info-card .label{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);margin-bottom:8px}
.info-card .value{font-family:var(--font-display);font-size:1.25rem;font-weight:700}

/* ===== Data Table ===== */
.data-table-wrapper{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px}
.data-table-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.data-table-header h2{font-family:var(--font-display);font-size:1.2rem;font-weight:700}
.data-table-count{font-size:0.85rem;color:var(--text-dim)}
.data-table{width:100%}
.data-table thead{background:var(--surface)}
.data-table th{padding:14px 20px;text-align:left;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);font-weight:600}
.data-table td{padding:14px 20px;border-top:1px solid var(--border);font-size:0.92rem;color:var(--text-muted)}
.data-table tbody tr{transition:background var(--transition)}
.data-table tbody tr:hover{background:var(--bg-card-hover)}
.data-table td a{color:var(--primary-light);font-weight:500}
.delivery-yes{color:var(--success);font-weight:600}
.delivery-no{color:var(--warning);font-weight:600}

/* ===== SEO Content Block ===== */
.seo-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;margin-bottom:40px}
.seo-content h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:16px}
.seo-content h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin:24px 0 10px;color:var(--text)}
.seo-content p{color:var(--text-muted);line-height:1.8;margin-bottom:14px}
.seo-content ul{margin:12px 0;padding-left:24px}
.seo-content ul li{color:var(--text-muted);margin-bottom:8px;list-style:disc}

/* ===== Related Links ===== */
.related-links{margin-bottom:40px}
.related-links h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:20px}
.related-grid{display:flex;flex-wrap:wrap;gap:10px}
.related-tag{padding:8px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:0.85rem;color:var(--text-muted);transition:var(--transition)}
.related-tag:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(99,102,241,0.08)}

/* ===== Static Pages ===== */
.page-hero{padding:140px 0 48px;text-align:center}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:16px}
.page-hero p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto}
.page-content{max-width:800px;margin:0 auto;padding-bottom:80px}
.page-content h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin:40px 0 16px}
.page-content h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:28px 0 12px}
.page-content p{color:var(--text-muted);line-height:1.8;margin-bottom:16px}
.page-content ul,.page-content ol{margin:12px 0 20px;padding-left:28px}
.page-content li{color:var(--text-muted);margin-bottom:8px;line-height:1.7}
.page-content ul li{list-style:disc}
.page-content ol li{list-style:decimal}
.page-content a{color:var(--primary-light);text-decoration:underline;text-underline-offset:3px}
.contact-form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;margin-top:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.9rem;font-weight:600;margin-bottom:8px;color:var(--text)}
.form-group input,.form-group textarea{width:100%;padding:14px 18px;background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius);color:var(--text);transition:var(--transition)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,0.12)}
.form-group textarea{min-height:140px;resize:vertical}
.form-submit{padding:14px 40px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700;border-radius:var(--radius);cursor:pointer;border:none;transition:var(--transition)}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,0.4)}

/* ===== Footer ===== */
.site-footer{background:var(--bg-card);border-top:1px solid var(--border);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:16px}
.footer-logo:hover{color:var(--text)}
.footer-desc{color:var(--text-dim);font-size:0.9rem;line-height:1.7}
.footer-heading{font-family:var(--font-display);font-size:0.95rem;font-weight:700;margin-bottom:20px;color:var(--text)}
.footer-links li{margin-bottom:12px}
.footer-links a{font-size:0.9rem;color:var(--text-dim);transition:color var(--transition)}
.footer-links a:hover{color:var(--primary-light)}
.footer-bottom{border-top:1px solid var(--border);padding:24px 0;text-align:center}
.footer-bottom p{font-size:0.85rem;color:var(--text-dim)}
.footer-note{margin-top:6px;font-size:0.78rem;color:var(--text-dim);opacity:0.7}

/* ===== Error / Empty ===== */
.error-block{text-align:center;padding:60px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:40px}
.error-block .error-icon{font-size:3rem;margin-bottom:16px}
.error-block h2{font-family:var(--font-display);font-size:1.4rem;margin-bottom:10px}
.error-block p{color:var(--text-muted);max-width:400px;margin:0 auto}

/* ===== Responsive ===== */
@media(max-width:768px){
  .search-form{flex-direction:column}
  .search-btn{width:100%;text-align:center}
  .search-tabs{flex-wrap:wrap}
  .search-tab{min-width:calc(50% - 4px)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .info-cards{grid-template-columns:1fr 1fr}
  .data-table-wrapper{overflow-x:auto}
  .data-table{min-width:600px}
  .popular-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(15,15,26,0.97);backdrop-filter:blur(16px);flex-direction:column;padding:24px;gap:20px;border-bottom:1px solid var(--border)}
  .nav-links.active{display:flex}
  .mobile-toggle{display:flex}
  .search-card{padding:28px 20px}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .info-cards{grid-template-columns:1fr}
  .hero h1{font-size:1.8rem}
  .section{padding:60px 0}
}

/* ===== Animations ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp 0.6s ease forwards}
.delay-1{animation-delay:0.1s}
.delay-2{animation-delay:0.2s}
.delay-3{animation-delay:0.3s}