/**
 * Vanga Vitanastika Core Stylesheet
 * Optimized Production Layout & Language System Engine
 * File Size: ~9.8 KB (Target: 6KB - 13KB)
 */

:root {
  --bg: #0f1412;
  --bg-elev: #161d1a;
  --card: rgba(22, 29, 26, 0.78);
  --text: #eef3ef;
  --muted: #a9b7ae;
  --line: rgba(255,255,255,0.08);
  --accent: #1b8d54;
  --accent-2: #99c14e;
  --hero-grad: linear-gradient(135deg, #ffffff 0%, #dcebdd 30%, #97c08f 66%, #f7fbf8 100%);
  --body-grad: radial-gradient(circle at 12% 18%, rgba(155,193,78,.13), transparent 24%), radial-gradient(circle at 85% 10%, rgba(255,255,255,.08), transparent 18%), radial-gradient(circle at 62% 78%, rgba(27,141,84,.11), transparent 26%), linear-gradient(180deg, #0f1412 0%, #121917 44%, #0b0f0d 100%);
  --panel: rgba(8, 12, 10, 0.38);
  --shadow: 0 20px 60px rgba(0,0,0,.28);
  --radius: 26px;
}

body.light {
  --bg: #e9f0ea;
  --card: rgba(255,255,255,0.76);
  --text: #10271b;
  --muted: #5d7468;
  --line: rgba(14,40,28,.10);
  --panel: rgba(255,255,255,.74);
  --body-grad: radial-gradient(circle at 15% 15%, rgba(153,193,78,.16), transparent 24%), radial-gradient(circle at 85% 12%, rgba(27,141,84,.08), transparent 22%), linear-gradient(180deg, #edf3ee 0%, #e7efe9 48%, #dfe9e3 100%);
}

/* ================= RESET & BASE LAYOUT ================= */
* { box-sizing: border-box; }

/* Locks system overscroll/elastic elastic bounce regions to the theme color */
html { 
  scroll-behavior: smooth; 
  background-color: #0f1412; 
  transition: background-color .35s ease;
}
body.light, html:has(body.light) { 
  background-color: #e9f0ea; 
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans Devanagari", "Nirmala UI", "Noto Naskh Arabic", "Segoe UI Arabic", "Noto Sans Arabic", sans-serif;
  background: var(--body-grad);
  color: var(--text);
  transition: background .35s ease, color .35s ease;
  background-size: 120% 120%;
  animation: bgShift 20s ease-in-out infinite;
}

body.light {
  animation: bgShift 25s ease-in-out infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 56%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 56%, transparent 100%);
  opacity: .17;
  pointer-events: none;
  z-index: 0;
}

body.light::before {
  background-image: linear-gradient(rgba(10,37,23,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,37,23,.04) 1px, transparent 1px);
  opacity: .12;
}

/* Decorative Ambient Background Particles */
.orb { position: fixed; border-radius: 999px; filter: blur(86px); pointer-events: none; z-index: 0; opacity: .12; animation: float 12s ease-in-out infinite; }
.orb.one { width: 280px; height: 280px; left: 4%; top: 7%; background: radial-gradient(circle, rgba(153,193,78,.9), rgba(153,193,78,0)); }
.orb.two { width: 240px; height: 240px; right: 8%; top: 10%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0)); animation-delay: -2.5s; }
.orb.three { width: 230px; height: 230px; left: 48%; bottom: 8%; background: radial-gradient(circle, rgba(27,141,84,.72), rgba(27,141,84,0)); animation-delay: -5s; }

.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; position: relative; z-index: 1; }
section { padding: 2.5rem 0; }

/* ================= HEADERS & TYPOGRAPHY ================= */
.section-head { max-width: 780px; margin-bottom: 1.5rem; }
.section-head h2 { margin: 0 0 .7rem; letter-spacing: -.04em; font-size: clamp(2rem, 4vw, 3.15rem); }
.section-head p { color: var(--muted); line-height: 1.76; }

.eyebrow { display: inline-flex; gap: .55rem; align-items: center; font-size: .86rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.breadcrumb { margin-top: 1.5rem; color: var(--muted); font-size: 1rem; }
h1 { margin: 1.15rem 0 1rem; line-height: .95; letter-spacing: -.055em; font-size: clamp(3.2rem, 6vw, 5.9rem); }
.lead { max-width: 720px; line-height: 1.72; font-size: 1.14rem; color: var(--muted); margin-bottom: 1.8rem; }

/* ================= GLOBAL NAVIGATION BAR ================= */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; justify-content: space-between; align-items: flex-start; min-height: 92px; gap: 1rem; padding: .8rem 0 .95rem; position: relative; }

.brand { display: flex; align-items: center; gap: .9rem; color: var(--text); text-decoration: none; font-weight: 800; }
.logo { width: clamp(45px,8vw,65px); height: clamp(45px,8vw,65px); font-size: clamp(2rem,5.5vw,2.75rem); background: color-mix(in srgb,var(--text) 18%,#0a2517); -webkit-mask: radial-gradient(circle,black 30%,transparent 70%); mask: radial-gradient(circle,black 30%,transparent 70%); display: flex; justify-content: center; align-items: center; line-height: 0.8; color: red; font-weight: 800; flex-shrink: 0; }

.nav-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; flex: 1; }
.nav-top { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; width: 100%; }
.nav-top a { color: var(--muted); text-decoration: none; font-size: .97rem; font-weight: 700; position: relative; }
.nav-top a:hover, .nav-top a.active { color: var(--text); }
.nav-top a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.menu-btn { display: none; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; cursor: pointer; }

/* ================= COMPONENTS, BUTTONS & CARDS ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.24rem; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: transform .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { border: none; color: white; background: linear-gradient(135deg, var(--accent), #38a469 56%, var(--accent-2)); box-shadow: 0 14px 34px rgba(27,141,84,.22); }
.btn.soft { background: rgba(255,255,255,.06); }
body.light .btn.soft { background: rgba(255,255,255,.8); }

.hero-card, .feature-card, .showcase-card, .pricing-card, .timeline-card, .cta-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ================= CORE GRID LAYOUT MODULES ================= */
.hero { min-height: 64vh; padding: 4.5rem 0 3rem; display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.8rem; align-items: center; }
.hero.compact { min-height: auto; grid-template-columns: 1fr; }
.hero-actions, .hero-stats { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.hero-stats { margin-top: 1.8rem; }

.stat-pill { min-width: 185px; padding: .95rem 1rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); }
.stat-pill strong { display: block; margin-bottom: .22rem; color: var(--text); font-size: 1.12rem; }

/* Dashboard Showcase Sub-Layouts */
.hero-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 35%), radial-gradient(circle at bottom left, rgba(151,186,72,.11), transparent 32%); pointer-events: none; }
.dashboard { padding: 1.25rem; display: grid; gap: 1rem; }
.window-bar { display: flex; gap: .45rem; padding: .2rem; }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; }
.window-bar span:nth-child(1) { background: #1b8d54; }
.window-bar span:nth-child(2) { background: #9bbc4e; }
.window-bar span:nth-child(3) { background: #dce7dd; }
.stacked { display: grid; gap: .95rem; }

.info-box { padding: 1.4rem; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
body.light .info-box { background: rgba(255,255,255,.76); }
.info-box .label { color: var(--muted); font-size: .96rem; margin-bottom: .72rem; }
.info-box .value { color: var(--text); font-size: 1.03rem; font-weight: 800; line-height: 1.45; }

/* Grid Modules */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card, .showcase-card, .pricing-card, .timeline-card { padding: 1.35rem; transition: transform .25s ease, border-color .25s ease; }
.feature-card:hover, .showcase-card:hover, .pricing-card:hover, .timeline-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.feature-icon { width: 54px; height: 54px; border-radius: 16px; margin-bottom: .9rem; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg, rgba(151,186,72,.16), rgba(255,255,255,.06)); border: 1px solid var(--line); }

/* Showcase Charts and Metrics Panel */
.showcase { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; }
body.light .panel { background: rgba(255,255,255,.78); }

.mini-chart { height: 185px; position: relative; overflow: hidden; margin-top: .65rem; }
.graph { position: absolute; inset: 14px 4px 0 4px; display: flex; align-items: end; gap: 10px; }
.bar { flex: 1; border-radius: 14px 14px 6px 6px; background: linear-gradient(180deg, #d9ece0, #5f916e 72%, #226441); }
body.light .bar { background: linear-gradient(180deg, #3d8b61, #7f9d4e 70%, #d3e0d0); }

.ring-wrap { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; }
.ring { --pct: 82; width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0); display: grid; place-items: center; }
.ring::before { content: attr(data-value); width: 78px; height: 78px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 92%, white 4%); color: var(--text); display: grid; place-items: center; font-weight: 800; font-size: 1.02rem; }
body.light .ring::before { background: white; }

.codebox { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; overflow: auto; background: rgba(255,255,255,.03); color: color-mix(in srgb, var(--text) 88%, #d9e5dc 12%); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; }

/* Pricing Layout Tables */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pricing-card { position: relative; overflow: hidden; }
.pricing-card.popular { border-color: rgba(27,141,84,.35); transform: translateY(-6px); }

.badge { position: absolute; top: 14px; right: 14px; padding: .35rem .7rem; border-radius: 999px; background: rgba(27,141,84,.14); border: 1px solid rgba(27,141,84,.22); font-size: .82rem; font-weight: 800; }
.price { font-size: 1.95rem; margin: .75rem 0; font-weight: 800; letter-spacing: -.05em; }
.price small { font-size: .92rem; color: var(--muted); font-weight: 600; }
.pricing-card ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: .75rem; }
.pricing-card li::before { content: "• "; color: var(--accent-2); }

/* Timeline layouts */
.timeline { display: grid; gap: 1rem; }
.timeline-card { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: start; }
.timeline-tag { padding: .6rem .8rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-align: center; font-weight: 800; color: var(--text); }
.kicker { color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; }

/* Call To Action layouts */
.cta-box { padding: 2rem; text-align: center; position: relative; overflow: hidden; }
.cta-box::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle, rgba(151,186,72,.14), transparent 35%), radial-gradient(circle at 80% 20%, rgba(27,141,84,.12), transparent 28%); }

/* Footer area layouts */
footer { padding: 2rem 0 3rem; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.footer-toggle { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 999px; padding: .6rem .75rem; cursor: pointer; }

/* ================= LOCAL FLAG DROPDOWN SYSTEM ================= */
.lang-dropdown { position: relative; display: inline-block; z-index: 50; }
.lang-trigger { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 0.4rem 0.65rem; border-radius: 12px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.lang-trigger:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, transparent); }

.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: color-mix(in srgb, var(--bg-elev) 98%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.55rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  min-width: 145px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light .lang-menu { background: color-mix(in srgb, var(--bg) 98%, transparent); }
.lang-dropdown:hover .lang-menu, .lang-dropdown:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* SVG Flag Folder Containment and Hover states */
.lang-menu .flag { position: relative; display: block; width: 28px; height: 20px; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; background: rgba(255, 255, 255, 0.05); }
.lang-menu .flag:hover { transform: scale(1.15); }
.lang-menu .flag img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ================= DESIGN ANIMATIONS ================= */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bgShift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 0%; }
  50% { background-position: 10% 10%, 90% 5%, 60% 90%, 50% 10%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 0%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-14px) translateX(10px) scale(1.04); }
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff, #dcebdd, #97c08f, #f7fbf8);
  background-size: 300% 300%;
  animation: gradientMove 10s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.light .gradient-text {
  background: linear-gradient(135deg, #2a5a42, #4f8d63, #7fbf8c);
  background-size: 300% 300%;
  animation: gradientMove 10s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================= RESPONSIIVITY MEDIA BREAKPOINTS ================= */
@media (max-width: 1080px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .hero, .showcase, .grid-3, .pricing, .timeline-card { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
}

@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .nav-wrap { position: absolute; top: calc(100% + .5rem); left: 1rem; right: 1rem; display: none; background: color-mix(in srgb, var(--bg) 94%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: .9rem; }
  .nav-wrap.open { display: flex; }
  .nav-top { flex-direction: column; justify-content: flex-start; align-items: stretch; }
  h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .ring-wrap { grid-template-columns: 1fr; justify-items: start; }
  .timeline-card { grid-template-columns: 1fr; }
  
  /* Dropdown Responsive Layout override for mobile nav viewports */
  .lang-dropdown { width: 100%; margin-top: 0.35rem; display: flex; justify-content: center; }
  .lang-trigger { width: auto; padding: 0.5rem 1.5rem; }
  .lang-menu {
    position: relative !important;
    top: 0 !important;
    width: auto !important;
    max-width: 240px;
    margin: 0.5rem auto 0;
    grid-template-columns: repeat(3, 1fr) !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}