/* ===========================
   HDmaps v4.7.8 – main.css
   =========================== */

/* ===== Design Tokens ===== */
:root {--accent: #00C9FF; --accent-dark: #0085B6; --bg: #ffffff; --border: #e1e8ed; --card-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.9); --muted: #6b7280; --shadow: 0 10px 30px rgba(0, 0, 0, 0.05); --text: #0B132B;}

/* ===== Reset / Base ===== */
* {box-sizing: border-box;}
html, body {background-color: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased;}

/* ===== Technoid Background Grid ===== */
body::before {animation: gridmove 33s linear infinite; background-color: transparent; background-image: linear-gradient(0deg, rgba(0, 201, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 201, 255, 0.1) 1px, transparent 1px); background-repeat: repeat; background-size: 60px 60px; content: ''; inset: 0; pointer-events: none; position: fixed; z-index: 0;}
@keyframes gridmove {from {background-position: 0 0, 0 0;} to {background-position: 60px 60px, 60px 60px;}}

/* ===== Layout ===== */
.container {margin: 0 auto; max-width: 1200px; padding: 24px;}
.section {border-top: 0px solid #f3f6f8; padding: 64px 0;}
.section h2 {display: inline-block; font-size: 24px; font-weight: 800; margin-bottom: 20px; position: relative;}
.section h2::after {background: var(--accent); border-radius: 2px; content: ''; display: block; height: 3px; margin-top: 6px; width: 60px;}

/* ===== Header (enhanced nav style) ===== */
.site-header {background: transparent; left: 0; padding: 12px 0; position: fixed; top: 0; transition: all 0.35s ease; width: 100%; z-index: 100;}
.site-header.scrolled {backdrop-filter: blur(10px); background: var(--header-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.site-header .inner {align-items: center; display: flex; gap: 20px; justify-content: space-between; margin: 0 auto; max-width: 1200px; padding: 0 24px; width: 100%;}
.logo {height: 46px;}
.nav-main {align-items: center; display: flex; gap: 26px; margin-left: auto;}
.nav-main a {color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; padding: 8px 10px; position: relative; text-decoration: none; transition: color 0.2s ease;}
.nav-main a::after {background: var(--accent); border-radius: 2px; bottom: -3px; content: ''; height: 2px; left: 50%; opacity: 0; position: absolute; transform: translateX(-50%) scaleX(0); transition: transform 0.3s ease, opacity 0.3s ease; width: 60%;}
.nav-main a:hover {color: var(--accent-dark);}
.nav-main a:hover::after {opacity: 1; transform: translateX(-50%) scaleX(1);}
.nav-links {align-items: center; display: flex; gap: 14px;}
.lang-toggle {border: 1px solid var(--accent); border-radius: 0 8px 0 0; color: var(--accent); font-weight: 700; padding: 8px 14px; text-decoration: none; transition: 0.2s ease;}
.lang-toggle:hover {background: var(--accent); color: #fff;}

/* ===== Hero ===== */
.hero-wrap {padding-top: 100px;}
.hero {align-items: stretch; display: flex; gap: 40px; padding: 60px 0;}
.hero-left, .hero-right {display: flex; flex: 1; flex-direction: column; justify-content: center;}
.hero-left {background: rgba(255, 255, 255, 0.9); border-radius: 0 12px 0 0; box-shadow: var(--shadow); opacity: 0; padding: 30px; transform: translateY(30px); transition: all 0.9s ease;}
.hero-left.visible {opacity: 1; transform: none;}
.hero h1 {font-size: 40px; font-weight: 800; margin-bottom: 16px;}
.hero p {color: var(--muted); font-size: 18px; line-height: 1.6; margin: 0;}
.hero-right img {border: 1px solid #eef5f8; border-radius: 6px; height: 100%; object-fit: cover; width: 100%;}
.cta-row {display: flex; gap: 12px; margin-top: auto; padding-top: 22px;}

/* ===== Buttons ===== */
.btn, a.btn {background: var(--accent); border: none; border-radius: 0 10px 0 0; box-shadow: 0 8px 24px rgba(0, 201, 255, 0.25); color: #fff; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700; padding: 12px 20px; text-decoration: none !important; transition: all 0.3s ease;}
.btn:hover, a.btn:hover {box-shadow: 0 12px 36px rgba(0, 201, 255, 0.35); transform: translateY(-3px);}
.btn.secondary, a.btn.secondary {background: #fff; border: 1px solid var(--accent); box-shadow: none; color: var(--accent);}
.card a.btn {margin-top: 22px;}

/* ===== Cards ===== */
.cards {display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.cards:not(.pricing) .card {justify-content: flex-start;}
.card {background: var(--card-bg); border: 1px solid var(--border); border-radius: 0 10px 0 0; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; overflow: hidden; padding: 24px; position: relative; transform: translateY(20px); transition: all 0.6s ease;}
.card.visible {opacity: 1; transform: none;}
.card.angled::after {border-left: 40px solid transparent; border-top: 40px solid var(--accent); content: ''; height: 0; position: absolute; right: 0; top: 0; width: 0;}
.card h3 {font-weight: 700; margin-bottom: 8px; margin-top: 0;}
.card p {color: var(--muted); margin: 0;}
.card .price {color: var(--text); font-size: 20px; font-weight: 800; margin-top: 10px;}
.card .cta-row {margin-top: auto; padding-top: 22px;}

/* ===== Blog Card Images ===== */
.blog-cards .card {overflow: hidden; position: relative;}
.blog-img {aspect-ratio: 16/9; border: 0; border-radius: 0; display: block; height: auto; margin: 16px -24px -24px; max-width: none; object-fit: cover; padding: 0; width: calc(100% + 48px);}
@media (max-width: 900px) {.blog-img {aspect-ratio: 16/9;}}


/* ===== Footer ===== */
.footer {border-top: 1px solid #f3f6f8; color: var(--muted); font-size: 15px; padding: 40px 0; text-align: center;}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero {flex-direction: column; text-align: center;}
  .hero-right img {height: auto;}
  .cta-row {justify-content: center;}
  .site-header .inner {padding: 0 16px;}
  .nav-main {display: none !important;}
}