/* Vikshree Computers — editorial corporate redesign, v2 */
:root {
  --navy: #0a3040;
  --navy2: #103f4d;
  --ink: #133541;
  --muted: #6b8188;
  --accent: #b9ec72;
  --mint: #26a58d;
  --paper: #f5f8f5;
  --line: #dce8e3;
}
body { background: #f6f8f5; color: var(--ink); }
h2 span { color: #2f9985; }
.eyebrow { color: #248a7a; }
.eyebrow-line { width: 27px; }
.section-pad { padding: 108px 0; }

/* A lighter, more approachable business identity */
.topbar { background: #0a3442; border: none; }
.topbar-inner { letter-spacing: .025em; }
.site-header {
  background: rgba(255,255,255,.96);
  color: #163844;
  border-bottom: 1px solid #dbe9e4;
  box-shadow: 0 4px 24px rgba(10,48,64,.035);
}
.brand-text strong { color: #103846; }
.brand-text small { color: #279d8c; }
.desktop-nav a { color: #38535f; }
.desktop-nav a:hover { color: #16856e; }
.header-cta { background: #103c4b; color: #fff; padding: 14px 21px; }
.header-cta:hover { background: #176b70; color: #fff; }
.menu-toggle { color: #163844; }
.mobile-nav { background: #fff; color: #163844; box-shadow: 0 16px 24px #0a304028; }
.mobile-nav a { border-color: #e5eeea; }

.hero {
  display: flex;
  min-height: 740px;
  background: #f5f8f5;
  color: #123442;
}
.hero:before {
  content: "";
  position: absolute;
  width: 660px; height: 660px;
  top: -380px; left: -370px;
  border-radius: 50%;
  border: 1px solid #b3d9c9;
  box-shadow: 0 0 0 110px #dcece422;
}
.hero-image {
  inset: 38px 0 124px 49%;
  border-radius: 30px 0 0 30px;
  background-position: 57% center;
  opacity: 1;
  box-shadow: -30px 34px 55px #1e5c5814;
}
.hero-overlay {
  inset: 38px 0 124px 49%;
  border-radius: 30px 0 0 30px;
  background: linear-gradient(180deg, transparent 70%, #0b263e4d);
}
.hero-content {
  padding-top: 108px;
  padding-bottom: 104px;
}
.hero-eyebrow { color: #1c9683; margin-bottom: 24px; }
.hero h1 {
  position: relative;
  max-width: 700px;
  font-size: clamp(52px, 5.2vw, 77px);
  line-height: 1.14;
  letter-spacing: -.064em;
  color: #0d3442;
  margin-bottom: 25px;
}
.hero h1 em { color: #168f7f; }
.hero-content > p {
  color: #5e7881;
  font-size: 15px;
  max-width: 480px;
  line-height: 1.85;
  margin-bottom: 26px;
}
.hero-buttons { gap: 11px; }
.hero .btn-accent { background: #123e4d; color: #fff; }
.hero .btn-accent:hover { background: #17697a; box-shadow: 0 10px 24px #164f6027; }
.hero .btn-outline { border-color: #c3d8d0; color: #174655; background: #fff; }
.hero .btn-outline:hover { background: #e2f3e8; }
.hero-assurance { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 29px; color: #476f73; }
.hero-assurance span { display: flex; align-items: center; gap: 7px; font: 700 11px Manrope,sans-serif; }
.hero-assurance .icon { width: 16px; height: 16px; stroke-width: 2.5; color: #1d9d83; }
.hero-bottom { margin-top: auto; padding-bottom: 31px; }
.hero-capabilities {
  width: 100%;
  background: #fff;
  color: #1d4450;
  border: 1px solid #e0ebe6;
  box-shadow: 0 20px 50px #164f4b0e;
  backdrop-filter: none;
  border-radius: 14px;
}
.hero-capabilities > div { min-height: 104px; padding: 27px 30px 20px; }
.hero-capabilities > div + div { border-left: 1px solid #e3eee8; }
.hero-capabilities strong { color: #173b49; font-size: 14px; }
.hero-capabilities small { color: #7a9095; font-size: 11px; }
.cap-number { top: 22px; right: 23px; color: #b1ccc1; }
.hero-scroll { display: none; }

/* A useful entry point for both customer groups */
.audience-section { background: #f4f8f5; padding: 75px 0 86px; }
.audience-grid { display: grid; grid-template-columns: 1.12fr repeat(3,1fr); align-items: stretch; gap: 16px; }
.audience-intro { padding: 22px 14px 18px 0; }
.audience-intro .eyebrow { margin-bottom: 20px; }
.audience-intro h2 { font-size: clamp(31px,3.15vw,47px); line-height: 1.22; }
.audience-card {
  background: #fff;
  border: 1px solid #e0ebe5;
  border-radius: 14px;
  padding: 27px 22px 25px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.audience-card:hover { transform: translateY(-5px); border-color: #a7d5c5; box-shadow: 0 18px 40px #143f4110; }
.audience-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; color: #157f73; background: #e6f6ed; margin-bottom: 27px; }
.audience-icon .icon { width: 27px; height: 27px; }
.audience-card strong { display: block; font: 800 20px Manrope,sans-serif; letter-spacing: -.035em; margin-bottom: 7px; }
.audience-card p { color: #768b8f; font-size: 13px; line-height: 1.7; margin-bottom: 21px; }
.audience-link { display: inline-flex; align-items: center; gap: 9px; color: #157d70; font: 800 11px Manrope,sans-serif; }
.audience-link .icon { width: 15px; height: 15px; }

.intro { background: #fff; }
.intro h2 span { color: #2e9684; }
.intro-copy .lead { color: #18404b; }
.feature-strip > div { background: #f4faf6; border-color: #e0ede6; }

/* Services now read as a clean, scannable business offering */
.services { background: #edf4f0; color: #163946; }
.services:before { border-color: #0f7c5b0b; box-shadow: 0 0 0 100px #23947a05,0 0 0 210px #23947a03; }
.services h2 span { color: #2d9884; }
.services .eyebrow { color: #238e7c; }
.section-topline > p { color: #6a828a; }
.service-grid { gap: 16px; }
.service-card {
  min-height: 300px;
  background: #fff;
  color: #173d48;
  border: 1px solid #dce9e3;
  border-radius: 14px;
  box-shadow: 0 4px 25px #1b4d4008;
}
.service-card:hover { background: #fff; border-color: #65bfa9; box-shadow: 0 16px 42px #24574d17; }
.service-icon { background: #e9f7ed; border: 1px solid #d4eddf; color: #198f7b; }
.service-index { color: #9db5ac; }
.service-card h3 { color: #153947; }
.service-card p { color: #71858c; }
.service-card > a { color: #168b78; }

/* Products take on an intentional premium-dark showcase */
.products { background: #0b2e3c; color: #fff; }
.products h2 span { color: #a0dcba; }
.products .eyebrow { color: #91d9c2; }
.product-head > p { color: #a3bac0; }
.product-card { border: none; }
.product-card:hover { box-shadow: 0 18px 40px #0004; }
.product-note { color: #bed1d0; }
.product-note .text-link { color: #bcf4c7; border-color: #bcf4c7; }
.product-visual { height: 205px; }
.product-info { color: #193e4a; }

/* AMC becomes a dedicated conversion section */
.amc-section { background: #dff2d5; overflow: hidden; }
.amc-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 9%; align-items: center; }
.amc-copy .eyebrow { color: #297b68; }
.amc-copy h2 span { color: #26836f; }
.amc-copy > p { max-width: 525px; color: #55756a; font-size: 15px; line-height: 1.9; margin: 24px 0 31px; }
.amc-panel { border-radius: 17px; background: #123e44; padding: 38px; color: #fff; box-shadow: 23px 22px 0 #b8dfb6; }
.amc-panel-top { display: flex; align-items: center; gap: 14px; padding-bottom: 27px; color: #a4d8cb; font: 800 10px Manrope,sans-serif; letter-spacing: .13em; }
.amc-spark { color: #bced7e; font-size: 35px; line-height: .7; }
.amc-row { display: flex; align-items: center; gap: 18px; border-top: 1px solid #ffffff24; padding: 22px 0; }
.amc-row > span { font: 800 11px Manrope,sans-serif; color: #84bbae; }
.amc-row > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.amc-row strong { font: 800 15px Manrope,sans-serif; }
.amc-row small { font-size: 11px; color: #a7c2bd; }
.amc-row .icon { color: #b6eb75; width: 19px; height: 19px; stroke-width: 2.5; }
.amc-note { font-size: 10px; line-height: 1.5; color: #94b4ae; border-top: 1px solid #ffffff24; padding-top: 16px; }

.why { background: #fff; }
.why h2 span { color: #2e9684; }
.process { background: #f2f7f3; }
.process-heading h2 span { color: #2c9783; }
.contact { background: #0a3040; }
.contact .eyebrow { color: #a3e3ce; }
.enquiry-card { box-shadow: 0 25px 80px #041f267c; }
.footer { background: #061f2b; }
.floating-whatsapp { background: #25d366; }

@media (max-width: 1100px) {
  .hero-image { left: 52%; }
  .hero h1 { font-size: 61px; max-width: 620px; }
  .hero-content > p { max-width: 420px; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .audience-intro { grid-column: 1 / -1; padding: 0 0 10px; }
  .amc-grid { gap: 5%; }
}
@media (max-width: 850px) {
  .hero { min-height: 700px; }
  .hero-image { left: 60%; bottom: 140px; }
  .hero-overlay { left: 60%; bottom: 140px; }
  .hero h1 { font-size: 54px; max-width: 560px; }
  .hero-content { padding-top: 82px; }
  .hero-assurance { gap: 12px; flex-direction: column; }
  .amc-grid { grid-template-columns: 1fr; gap: 47px; }
  .amc-panel { max-width: 650px; }
}
@media (max-width: 600px) {
  .site-header { height: 70px; }
  .hero { min-height: 0; }
  .hero-content { flex: none; padding-top: 59px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(40px,9.4vw,52px); line-height: 1.16; margin-bottom: 19px; }
  .hero-content > p { font-size: 14px; max-width: 100%; }
  .hero-eyebrow { font-size: 10px; }
  .hero-buttons { max-width: 100%; }
  .hero-buttons .btn { width: 100%; }
  .hero-assurance { margin-top: 23px; gap: 11px; }
  .hero-image {
    position: relative;
    inset: auto;
    height: 260px;
    width: calc(100% - 36px);
    margin: 0 18px 22px;
    background-position: 62% center;
    border-radius: 18px;
    box-shadow: 0 13px 25px #164f4820;
    flex: none;
  }
  .hero-overlay { display: none; }
  .hero-bottom { flex: none; padding-bottom: 22px; }
  .hero-capabilities { grid-template-columns: 1fr; border-radius: 12px; }
  .hero-capabilities > div { padding: 15px 19px; min-height: 0; }
  .hero-capabilities > div + div { border-left: none; border-top: 1px solid #e1ebe5; }
  .cap-number { top: 17px; }
  .hero-capabilities strong { font-size: 12px; }
  .audience-section { padding: 65px 0 70px; }
  .audience-grid { grid-template-columns: 1fr; gap: 12px; }
  .audience-intro { grid-column: auto; padding: 0 0 16px; }
  .audience-card { padding: 24px; }
  .audience-icon { margin-bottom: 17px; }
  .section-pad { padding: 72px 0; }
  .service-card { min-height: 245px; }
  .product-visual { height: 145px; }
  .amc-panel { padding: 25px 22px; box-shadow: 12px 12px 0 #b8dfb6; }
  .amc-row { gap: 12px; }
  .amc-row strong { font-size: 13px; }
  .amc-copy > p { font-size: 14px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 38px; }
}