:root {

  --navy: #071b36;

  --blue: #0866e8;

  --blue-dark: #0754c5;

  --text: #12233c;

  --muted: #64748b;

  --line: #e4eaf2;

  --surface: #ffffff;

  --light: #f4f8fd;

  --radius: 18px;

  --shadow: 0 12px 35px rgba(18, 45, 80, 0.08);

}



\* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}



body {

  margin: 0;

  font-family: "Segoe UI", Arial, sans-serif;

  color: var(--text);

  background: var(--surface);

  line-height: 1.6;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

a {

  -webkit-tap-highlight-color: transparent;

}



button {

  font: inherit;

}



.container {

  width: min(1180px, calc(100% - 40px));

  margin-inline: auto;

}



.topbar {

  background: var(--navy);

  color: #dbe7f7;

  font-size: 13px;

}



.topbar-inner {

  min-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}



.topbar a:hover {

  color: white;

}



.header {

  background: white;

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

  z-index: 20;

}



.nav {

  min-height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}



.logo {

  display: grid;

  grid-template-columns: auto auto;

  align-items: center;

  width: fit-content;

  font-size: 30px;

  font-weight: 850;

  letter-spacing: -1.5px;

  line-height: 1;

  color: var(--navy);

}



.logo-mark {

  color: var(--blue);

}



.logo-mark span {

  color: #f18a28;

}



.logo small {

  grid-column: 1 / -1;

  margin-top: 7px;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.6px;

  color: var(--muted);

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 27px;

  font-size: 14px;

  font-weight: 600;

}



.nav-links > a:not(.nav-contact):hover {

  color: var(--blue);

}



.nav-contact {

  background: var(--blue);

  color: white;

  padding: 12px 19px;

  border-radius: 30px;

}



.nav-contact:hover,

.btn-primary:hover {

  background: var(--blue-dark);

}



.menu-toggle {

  display: none;

  border: 1px solid var(--line);

  border-radius: 10px;

  padding: 8px 12px;

  background: white;

  color: var(--navy);

  cursor: pointer;

}



.hero {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(ellipse at 80% 45%, #d4e8ff 0, transparent 42%),

    linear-gradient(115deg, #eff7ff, #ffffff 70%);

}



.hero-grid {

  min-height: 485px;

  display: grid;

  grid-template-columns: 1.08fr 0.92fr;

  align-items: center;

  gap: 30px;

  padding-block: 52px;

}



.hero-content {

  position: relative;

  z-index: 2;

}



.eyebrow {

  color: #55718f;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 3px;

  margin: 0 0 13px;

}



h1,

h2,

h3,

p {

  margin-top: 0;

}



h1 {

  color: var(--navy);

  font-size: clamp(36px, 4.4vw, 57px);

  letter-spacing: -2px;

  line-height: 1.12;

  margin-bottom: 20px;

}



h1 span {

  display: block;

  color: var(--blue);

}



.hero-description {

  max-width: 550px;

  color: #51647c;

  font-size: 17px;

  line-height: 1.85;

  margin-bottom: 28px;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}



.btn {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border: 1px solid transparent;

  border-radius: 30px;

  padding: 13px 23px;

  font-size: 14px;

  font-weight: 750;

  transition: transform 0.2s, background 0.2s;

}



.btn:hover {

  transform: translateY(-2px);

}



.btn-primary {

  color: white;

  background: var(--blue);

}



.btn-secondary {

  color: var(--navy);

  background: white;

  border-color: #cbd8e8;

}



.btn-secondary:hover {

  border-color: var(--blue);

}



.trust-points {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 30px;

  color: #38516e;

  font-size: 12px;

  font-weight: 650;

}



.hero-visual {

  min-height: 350px;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  isolation: isolate;

}



.glow {

  position: absolute;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background: #d0e5ff;

  filter: blur(10px);

  z-index: -1;

}



.screen {

  border: 5px solid #17283d;

  background: white;

  box-shadow: 0 25px 60px rgba(7, 27, 54, 0.23);

}



.screen-back {

  position: absolute;

  width: 82%;

  min-height: 260px;

  top: 25px;

  right: 0;

  border-radius: 18px;

  padding: 19px;

  transform: rotate(2deg);

  background: linear-gradient(140deg, #0b2852, #0b5cbd);

  color: white;

}



.screen-top {

  display: flex;

  justify-content: space-between;

  font-size: 12px;

  font-weight: 800;

  margin-bottom: 20px;

}



.screen-top span:last-child {

  color: #c7defe;

  font-weight: 500;

}



.stat-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



.stat {

  padding: 12px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 10px;

}



.stat small,

.stat strong {

  display: block;

}



.stat small {

  color: #c7defe;

  font-size: 10px;

}



.stat strong {

  font-size: 20px;

  margin-top: 4px;

}



.chart {

  display: flex;

  align-items: end;

  gap: 10px;

  height: 72px;

  margin-top: 17px;

  padding: 0 8px;

  border-bottom: 1px solid #6596d6;

}



.chart i {

  flex: 1;

  background: linear-gradient(#79c3ff, #2581ef);

  border-radius: 4px 4px 0 0;

}



.screen-note {

  margin: 12px 0 0;

  font-size: 11px;

  color: #dceaff;

}



.screen-front {

  position: absolute;

  width: 48%;

  max-width: 230px;

  left: 0;

  bottom: 8px;

  padding: 22px 17px;

  border-radius: 25px;

  transform: rotate(-3deg);

}



.app-logo {

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 14px;

  background: linear-gradient(135deg, #0875ff, #58b5ff);

  color: white;

  font-size: 28px;

  font-weight: 900;

}



.screen-front h3 {

  margin: 15px 0 5px;

  font-size: 17px;

}



.screen-front p {

  font-size: 11px;

  color: var(--muted);

  margin-bottom: 17px;

}



.app-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 13px 8px;

}



.app-grid > div {

  display: grid;

  justify-items: center;

  gap: 5px;

}



.app-grid small {

  color: #42556d;

  font-size: 10px;

}



.app-icon {

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 12px;

  color: white;

  font-size: 16px;

}



.blue { background: #1682ed; }

.orange { background: #f18b31; }

.purple { background: #9845d6; }

.green { background: #24a86b; }



.benefits {

  border-bottom: 1px solid var(--line);

  background: white;

}



.benefit-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  padding-block: 24px;

}



.benefit {

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 6px 18px;

  border-right: 1px solid var(--line);

}



.benefit:first-child {

  padding-left: 0;

}



.benefit:last-child {

  border-right: 0;

}



.benefit-icon {

  width: 43px;

  height: 43px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 13px;

  font-size: 21px;

  font-weight: 850;

}



.benefit h3 {

  font-size: 14px;

  margin-bottom: 3px;

}



.benefit p {

  color: var(--muted);

  font-size: 12px;

  margin: 0;

}



.section {

  padding-block: 76px;

  background: #f8fafd;

}



.section-heading {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 25px;

  margin-bottom: 29px;

}



.section-heading h2,

.about-inner h2,

.contact-inner h2 {

  color: var(--navy);

  font-size: clamp(28px, 3.5vw, 39px);

  line-height: 1.2;

  letter-spacing: -1px;

  margin-bottom: 10px;

}



.section-heading p:not(.eyebrow) {

  color: var(--muted);

  margin-bottom: 0;

  font-size: 14px;

}



.text-link {

  color: var(--blue);

  font-size: 13px;

  font-weight: 750;

  white-space: nowrap;

  padding-bottom: 5px;

}



.product-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

}



.product-card {

  display: flex;

  gap: 18px;

  align-items: flex-start;

  padding: 25px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: white;

  box-shadow: 0 5px 18px rgba(18, 45, 80, 0.035);

  transition: transform 0.2s, box-shadow 0.2s;

}



.product-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow);

}



.card-green { background: linear-gradient(135deg, #f0fff5, white); }

.card-blue { background: linear-gradient(135deg, #eff7ff, white); }

.card-purple { background: linear-gradient(135deg, #faf1ff, white); }

.card-orange { background: linear-gradient(135deg, #fff5ec, white); }



.product-icon {

  width: 62px;

  height: 62px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 17px;

  background: #e3f1ff;

  color: var(--blue);

  font-size: 27px;

  font-weight: 850;

}



.card-green .product-icon { background: #d9f8e4; color: #13884b; }

.card-purple .product-icon { background: #f0ddff; color: #8c36c6; }

.card-orange .product-icon { background: #ffe5d1; color: #dd6b12; }



.product-card h3 {

  margin: 2px 0 8px;

  font-size: 17px;

}



.product-card p {

  color: var(--muted);

  font-size: 13px;

  line-height: 1.8;

  margin-bottom: 12px;

}



.product-card a {

  font-size: 13px;

  color: var(--blue);

  font-weight: 750;

}



.about-section {

  padding-block: 64px;

  background: white;

}



.about-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.about-inner p:last-child {

  color: var(--muted);

  line-height: 1.9;

  margin: 0;

}



.contact-section {

  padding-block: 52px;

  background: #edf5ff;

}



.contact-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}



.contact-inner h2 {

  font-size: 30px;

}



.contact-inner p:last-child {

  margin-bottom: 0;

  color: var(--muted);

}



.footer {

  background: var(--navy);

  color: #dbe7f7;

  padding-block: 25px;

}



.footer-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  font-size: 12px;

}



.footer-inner p {

  margin: 0;

}



.footer-logo {

  font-size: 21px;

  font-weight: 900;

  color: white;

  letter-spacing: 1px;

}



.footer-inner a:last-child:hover {

  color: white;

}



@media (max-width: 980px) {

  .nav {

    min-height: 76px;

  }



  .menu-toggle {

    display: block;

  }



  .nav-links {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    padding: 20px;

    background: white;

    border-bottom: 1px solid var(--line);

    box-shadow: var(--shadow);

    flex-direction: column;

    align-items: stretch;

    gap: 0;

  }



  .nav-links.open {

    display: flex;

  }



  .nav-links a {

    padding: 12px;

  }



  .nav-contact {

    text-align: center;

    margin-top: 8px;

  }



  .hero-grid {

    grid-template-columns: 1fr 0.85fr;

    gap: 10px;

  }



  .hero-visual {

    transform: scale(0.9);

  }



  .benefit-grid {

    grid-template-columns: repeat(2, 1fr);

    row-gap: 20px;

  }



  .benefit:nth-child(2) {

    border-right: 0;

  }

}



@media (max-width: 680px) {

  .container {

    width: min(100% - 30px, 540px);

  }



  .topbar-inner {

    min-height: 36px;

    font-size: 11px;

  }



  .topbar-inner > span {

    max-width: 60%;

  }



  .nav {

    min-height: 72px;

  }



  .logo {

    font-size: 25px;

  }



  .hero-grid {

    grid-template-columns: 1fr;

    padding-block: 45px 28px;

  }



  h1 {

    font-size: clamp(36px, 10vw, 49px);

    letter-spacing: -1.5px;

  }



  .hero-description {

    font-size: 15px;

  }



  .trust-points {

    gap: 10px 16px;

  }



  .hero-visual {

    min-height: 300px;

    transform: none;

    margin-top: 8px;

  }



  .screen-back {

    width: 78%;

    right: 2%;

    top: 18px;

  }



  .screen-front {

    width: 46%;

    left: 3%;

    bottom: 3px;

  }



  .benefit-grid {

    padding-block: 20px;

    gap: 18px 8px;

  }



  .benefit {

    padding: 4px;

    gap: 9px;

    border-right: 0;

  }



  .benefit-icon {

    width: 35px;

    height: 35px;

    font-size: 17px;

  }



  .benefit h3 {

    font-size: 12px;

  }



  .benefit p {

    font-size: 10px;

  }



  .section {

    padding-block: 53px;

  }



  .section-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

  }



  .product-grid {

    grid-template-columns: 1fr;

    gap: 13px;

  }



  .product-card {

    padding: 20px;

    gap: 14px;

  }



  .product-icon {

    width: 50px;

    height: 50px;

    border-radius: 14px;

    font-size: 22px;

  }



  .product-card h3 {

    font-size: 15px;

  }



  .about-inner {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .contact-inner {

    align-items: flex-start;

    flex-direction: column;

  }



  .footer-inner {

    align-items: flex-start;

    flex-direction: column;

    gap: 10px;

  }

}



@media (prefers-reduced-motion: reduce) {

  \*,

  \*::before,

  \*::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

  }

}





/\* Shared styles for Products, Android Apps and Downloads pages \*/



.page-hero {

  padding: 64px 0;

  background: linear-gradient(120deg, #edf6ff, #ffffff);

  border-bottom: 1px solid var(--line);

}



.page-hero h1 {

  font-size: clamp(36px, 5vw, 52px);

  margin-bottom: 15px;

}



.page-hero h1 span {

  color: var(--blue);

}



.page-hero p:last-child {

  max-width: 650px;

  margin-bottom: 0;

  color: var(--muted);

}



.search-label {

  display: block;

  font-weight: 700;

  margin-bottom: 8px;

}



.site-search {

  display: block;

  width: 100%;

  max-width: 650px;

  min-height: 48px;

  padding: 12px 16px;

  margin-bottom: 22px;

  border: 1px solid #cbd8e8;

  border-radius: 12px;

  background: white;

  color: var(--text);

  font: inherit;

  outline: none;

}



.site-search:focus {

  border-color: var(--blue);

  box-shadow: 0 0 0 3px rgba(8, 102, 232, 0.12);

}



.filter-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 25px;

}



.filter-btn {

  padding: 9px 16px;

  border: 1px solid var(--line);

  border-radius: 25px;

  background: white;

  color: var(--text);

  cursor: pointer;

  font-size: 13px;

  font-weight: 650;

}



.filter-btn:hover,

.filter-btn.active {

  background: var(--blue);

  border-color: var(--blue);

  color: white;

}



.product-card[hidden],

.download-item[hidden] {

  display: none !important;

}



.empty-state {

  padding: 20px;

  border: 1px dashed #bdcce0;

  border-radius: 12px;

  color: var(--muted);

  text-align: center;

}



.status-label {

  display: inline-block;

  margin: 0 0 13px;

  font-size: 12px;

  font-weight: 700;

}



.status-planned {

  color: #8a5a12;

  background: #fff4d9;

  padding: 5px 9px;

  border-radius: 7px;

}



.btn:disabled {

  cursor: not-allowed;

  opacity: 0.6;

  transform: none;

}



.notice-panel {

  margin-top: 35px;

  padding: 26px;

  border: 1px solid #dce8f7;

  border-radius: var(--radius);

  background: #edf5ff;

}



.notice-panel h3 {

  margin-bottom: 8px;

}



.notice-panel p {

  color: var(--muted);

  margin-bottom: 17px;

}



.download-list {

  display: grid;

  gap: 15px;

}



.download-item {

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 23px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: white;

}



.download-symbol {

  display: grid;

  place-items: center;

  flex-shrink: 0;

  width: 54px;

  height: 54px;

  border-radius: 14px;

  font-size: 23px;

  font-weight: 850;

}



.windows-symbol {

  background: #e4f1ff;

  color: #0870df;

}



.android-symbol {

  background: #e0f8e9;

  color: #16864b;

}



.download-info {

  flex: 1;

  min-width: 0;

}



.download-info h3 {

  margin-bottom: 6px;

  font-size: 16px;

}



.download-info p {

  margin-bottom: 10px;

  color: var(--muted);

  font-size: 13px;

}



.download-info .status-label {

  margin-bottom: 0;

}



@media (max-width: 600px) {

  .page-hero {

    padding: 45px 0;

  }



  .download-item {

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 13px;

    padding: 17px;

  }



  .download-info {

    flex-basis: calc(100% - 70px);

  }



  .download-item > button {

    margin-left: 67px;

  }



  .notice-panel {

    padding: 20px;

  }

}





.brand-logo {

  display: inline-flex;

  align-items: center;

  flex-shrink: 0;

}



.brand-logo img {

    display: block;

    width: 280px;

    height: 75px;

    object-fit: contain;

}





@media (max-width: 680px) {

    .brand-logo img {

        width: 210px;

        height: 60px;

    }

}









/\* Final Vansoft logo size \*/

.brand-logo {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

}



.brand-logo img {

    display: block;

    width: 280px;

    height: 75px;

    max-width: 100%;

    object-fit: contain;

}



@media (max-width: 680px) {

    .brand-logo img {

        width: 210px;

        height: 60px;

    }

}



.hero {

  background:

    radial-gradient(ellipse at 82% 34%, rgba(67, 145, 255, .20), transparent 38%),

    radial-gradient(ellipse at 8% 100%, rgba(94, 234, 212, .13), transparent 32%),

    linear-gradient(120deg, #f1f7ff 0%, #ffffff 62%, #f7fbff 100%);

}

.hero-grid {

  min-height: 520px;

  padding-block: 68px;

}

.hero-content .eyebrow {

  display: inline-flex;

  align-items: center;

  padding: 8px 12px;

  border: 1px solid #d5e6ff;

  border-radius: 999px;

  background: rgba(255,255,255,.78);

  letter-spacing: 1.5px;

}

h1 {

  max-width: 680px;

  font-size: clamp(40px, 5vw, 66px);

  letter-spacing: -2.5px;

}

.hero-description {

  max-width: 560px;

  font-size: 17px;

}

.btn {

  box-shadow: 0 7px 18px rgba(8, 102, 232, .10);

}

.btn-primary {

  box-shadow: 0 10px 22px rgba(8, 102, 232, .22);

}

.hero-visual .screen {

  transition: transform .25s ease, box-shadow .25s ease;

}

.hero-visual:hover .screen-front {

  transform: rotate(-1deg) translateY(-4px);

}

.hero-visual:hover .screen-back {

  transform: rotate(1deg) translateY(-3px);

}

.benefits {

  box-shadow: 0 8px 25px rgba(18, 45, 80, .025);

}

.section {

  background: linear-gradient(180deg, #f8fafd 0%, #f3f7fc 100%);

}

.section-heading h2,

.about-inner h2,

.contact-inner h2 {

  letter-spacing: -1.3px;

}

.product-card {

  border-color: #e0e9f5;

  box-shadow: 0 8px 24px rgba(18, 45, 80, .045);

}

.product-card:hover {

  border-color: #c7dcfb;

}

.featured-heading {

  margin-top: 62px;

  margin-bottom: 24px;

}

.featured-heading h2 {

  margin: 0 0 8px;

  color: var(--navy);

  font-size: clamp(27px, 3vw, 36px);

  letter-spacing: -1px;

}

.featured-heading > p:last-child {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}

.featured-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}

.featured-card {

  display: flex;

  gap: 17px;

  padding: 23px;

  border: 1px solid #e0e9f5;

  border-radius: 20px;

  background: rgba(255,255,255,.92);

  box-shadow: 0 8px 24px rgba(18,45,80,.045);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

}

.featured-card:hover {

  transform: translateY(-3px);

  border-color: #c5daf8;

  box-shadow: 0 16px 35px rgba(18,45,80,.09);

}

.featured-icon {

  display: grid;

  place-items: center;

  flex: 0 0 58px;

  width: 58px;

  height: 58px;

  border-radius: 17px;

  font-weight: 850;

  font-size: 18px;

}

.pdf-icon { background: #fff0f0; color: #d83242; font-size: 15px; }

.cash-icon { background: #e8fbf0; color: #12834a; font-size: 27px; }

.accounts-icon { background: #eaf2ff; color: #145bd7; }

.ugc-icon { background: #f4eaff; color: #8038b5; font-size: 14px; }

.featured-copy { min-width: 0; }

.featured-copy .status-label { margin-bottom: 9px; }

.featured-copy h3 { margin: 0 0 7px; color: var(--navy); font-size: 17px; }

.featured-copy p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.75; }

.project-type { color: #526a86; font-size: 11px; font-weight: 750; letter-spacing: .2px; }

.about-section { border-top: 1px solid #eef2f7; }

.contact-section {

  background:

    radial-gradient(ellipse at 90% 20%, rgba(8,102,232,.12), transparent 40%),

    #edf5ff;

}

.footer { border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 680px) {

  .brand-logo img { width: 155px; }

  .hero-grid { padding-block: 42px 28px; }

  h1 { letter-spacing: -1.8px; }

  .featured-grid { grid-template-columns: 1fr; }

  .featured-card { padding: 18px; gap: 13px; }

  .featured-icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; }

}


/* FINAL OVERRIDES — shared Vansoft header and responsive logo */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
}

.brand-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 68px;
  object-fit: contain;
}

@media (max-width: 680px) {
  .brand-logo img {
    width: 170px;
    height: 56px;
  }
}


/* Product detail navigation */
.featured-title-link { color: inherit; text-decoration: none; }
.featured-title-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }


/* Ramcharitmanash release information */
.app-release-note {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
#ramcharitmanash {
  scroll-margin-top: 110px;
}