/* ============================================================
   VyaparCred — Main Stylesheet (v2)  ·  editorial green-on-paper
   Part 1: base · buttons · nav · hero · trust
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.58;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
select,input { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[data-lucide] { width: 1em; height: 1em; stroke-width: 1.75; display: inline-block; vertical-align: middle; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: 14px; top: -60px; z-index: 200; background: var(--forest); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); transition: top .2s var(--ease); }
.skip:focus { top: 14px; }

/* ---------- pills / chips ---------- */
.data-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: transparent; color: var(--green-ink); border: 1px solid var(--line-2); white-space: nowrap;
}
.pill--warm  { background: var(--tag-warm-bg);  color: var(--tag-warm-fg);  border-color: transparent; }
.pill--cool  { background: var(--tag-cool-bg);  color: var(--tag-cool-fg);  border-color: transparent; }
.pill--khaki { background: var(--tag-khaki-bg); color: var(--tag-khaki-fg); border-color: transparent; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); display: inline-block; }
.dot--pulse { position: relative; }
.dot--pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--green-bright); opacity: .5; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%{transform:scale(.5);opacity:.55} 70%{transform:scale(2.4);opacity:0} 100%{opacity:0} }

/* ---------- eyebrow (signature: mono · hairline lead) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ""; width: var(--eyebrow-line); height: 1px; background: currentColor; flex: none; opacity: .8; }
.eyebrow--light { color: var(--green-bright); }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  --pad-y: 13px; --pad-x: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 500; font-size: .94rem; line-height: 1; letter-spacing: -.01em;
  padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn [data-lucide] { font-size: 1.02em; transition: transform .18s var(--ease); }
.btn:hover [data-lucide] { transform: translateX(2px); }
.btn:hover [data-lucide][data-lucide="arrow-down"] { transform: translateY(2px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper); }
.btn--on-dark { background: var(--green-bright); color: #fff; }
.btn--on-dark:hover { background: #fff; color: var(--green-ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: #fff; color: var(--green-ink); border-color: #fff; }
.btn--sm { --pad-y: 10px; --pad-x: 17px; font-size: .86rem; }
.btn--lg { --pad-y: 16px; --pad-x: 28px; font-size: 1.02rem; }
.btn--block { width: 100%; }

.textlink { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 500; font-size: .94rem; letter-spacing: -.01em; transition: gap .2s var(--ease), color .2s var(--ease); }
.textlink:hover { gap: 11px; color: var(--green-deep); }

/* ---------- announce ---------- */
.announce { background: var(--forest); color: var(--on-dark); font-size: .85rem; }
.announce__in { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.announce .data-chip { background: var(--green-bright); color: #fff; border-color: transparent; }
.announce__in > span:not(.data-chip) { color: var(--on-dark-muted); }
.announce a { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 500; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; }
.announce a:hover { color: var(--green-bright); border-color: var(--green-bright); }
.announce__x { margin-left: auto; color: var(--on-dark-muted); display: inline-flex; padding: 4px; border-radius: 4px; }
.announce__x:hover { color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 720px){ .announce__in > span:not(.data-chip){ display: none; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(246,246,244,.9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); transition: border-color .25s var(--ease), background .25s var(--ease); }
.nav.is-scrolled { background: rgba(246,246,244,.96); border-color: var(--line-2); }
.nav__in { display: flex; align-items: center; gap: 10px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.16rem; letter-spacing: -.025em; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.nav__menu { display: flex; align-items: center; gap: 2px; margin-left: 26px; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: var(--r-sm); font-weight: 500; font-size: .9rem; letter-spacing: -.01em; color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease); }
.nav__link:hover { color: var(--green-ink); background: var(--paper); }
.chev { font-size: .9em; transition: transform .25s var(--ease); }
.nav__item[data-mega]:hover .chev { transform: rotate(180deg); }
.nav__spacer { flex: 1; }
.nav__livechip { background: transparent; color: var(--green-ink); border-color: var(--line-2); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__login { font-family: inherit; background: none; border: 0; cursor: pointer; font-weight: 500; font-size: .9rem; padding: 8px 6px; color: var(--ink-2); transition: color .15s var(--ease); }
.nav__login:hover { color: var(--green-ink); }

.mega { position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(8px); width: min(640px, calc(100vw - 2 * var(--gutter))); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 22px; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 120; }
.nav__item[data-mega]:hover .mega, .nav__item[data-mega].is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.mega__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
.mega__col h4, .mega__aside .h4 { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-2); font-weight: 500; margin-bottom: 12px; }
.mega__links { display: grid; gap: 2px; }
.mega__link { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r-sm); transition: background .18s var(--ease); }
.mega__link:hover { background: var(--cream); }
.mega__link .ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 1.1rem; }
.mega__link b { display: block; font-weight: 600; font-size: .94rem; color: var(--ink); letter-spacing: -.01em; }
.mega__link > span > span { font-size: .78rem; color: var(--gray); }
.mega__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega__aside { background: var(--cream); border-radius: var(--r-md); padding: 16px; border: 1px solid var(--line); }
.mega__pill { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); font-size: .86rem; font-weight: 500; margin-bottom: 8px; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.mega__pill:last-child { margin-bottom: 0; }
.mega__pill:hover { border-color: var(--green); transform: translateX(3px); }
.mega__pill [data-lucide] { color: var(--green); }

.burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); align-items: center; justify-content: center; font-size: 1.2rem; color: var(--ink); }
.burger:hover { border-color: var(--green); background: var(--paper); }
@media (max-width: 1000px){ .nav__menu, .nav__livechip, .nav__login { display: none; } .burger { display: inline-flex; } }
@media (max-width: 560px){ .nav__actions .btn--sm { display: none; } }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; background: var(--forest); color: var(--on-dark); overflow-y: auto; padding: 18px 0 40px; transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer .brand { color: #fff; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; }
.drawer__close { width: 40px; height: 40px; border-radius: var(--r-sm); color: #fff; display: grid; place-items: center; font-size: 1.2rem; border: 1px solid var(--on-dark-line); }
.drawer__close:hover { background: rgba(255,255,255,.1); }
.drawer__nav { display: grid; gap: 2px; }
.drawer__acc { border-bottom: 1px solid var(--on-dark-line); }
.drawer__accbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 4px; font-weight: 500; font-size: 1.02rem; }
.drawer__accbtn [data-lucide] { transition: transform .25s var(--ease); color: var(--on-dark-muted); }
.drawer__accbtn[aria-expanded="true"] [data-lucide] { transform: rotate(180deg); }
.drawer__panel { display: grid; gap: 2px; overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); }
.drawer__panel.is-open { max-height: 420px; padding-bottom: 10px; }
.drawer__sub { padding: 10px 4px 10px 16px; color: var(--on-dark-muted); font-size: .94rem; }
.drawer__sub:hover { color: #fff; }
.drawer__link { padding: 16px 4px; font-weight: 500; font-size: 1.02rem; border-bottom: 1px solid var(--on-dark-line); }
.drawer__cta { display: grid; gap: 10px; margin-top: 24px; }

/* ---------- sections + headings ---------- */
.section { padding-block: clamp(48px, 5vw, 80px); }
.section--alt { background: var(--paper); }
.section--surface { background: var(--white); }
.section--dark { position: relative; overflow: hidden; background: var(--forest); color: var(--on-dark); background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px); background-size: 18px 18px; }
.section--dark::after { content: ""; position: absolute; right: -64px; bottom: -84px; width: 440px; height: 275px; background: url("../brand/vc-watermark.svg") no-repeat center/contain; opacity: .055; pointer-events: none; z-index: 0; }
.section--dark > .wrap { position: relative; z-index: 1; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; margin-top: 14px; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.02em; font-weight: 600; }
.h4 { font-weight: 600; }
.section--dark .h2, .section--dark .h3 { color: #fff; }
.lede { font-size: var(--fs-lede); color: var(--gray); line-height: 1.6; margin-top: 14px; max-width: 60ch; text-wrap: pretty; }
.section--dark .lede { color: rgba(255,255,255,.74); }
.section-head { max-width: 720px; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-6); align-items: end; margin-bottom: var(--sp-6); }
.section-head--split .lede { margin-top: 0; }
@media (max-width: 800px){ .section-head--split { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--cream); padding-block: clamp(32px,4vw,48px) clamp(44px,5vw,68px); border-bottom: 1px solid var(--line); }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-6); align-items: center; }
.hero__panel { align-self: stretch; display: flex; }
.hero__copy { max-width: 620px; }
.hero__eyebrow { margin-bottom: 18px; }
.hero__h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.hero__h1 .accent {
  color: var(--green-deep);
  background-image: linear-gradient(0deg, rgba(46,139,87,.20), rgba(46,139,87,.20));
  background-repeat: no-repeat; background-size: 100% .3em; background-position: 0 92%;
}
html.reveal-ready .hero__copy:not(.is-in) .hero__h1 .accent { background-size: 0% .3em; }
.hero__copy.is-in .hero__h1 .accent { transition: background-size .9s var(--ease) .45s; }
.hero__sub { font-size: 1.05rem; color: var(--gray); line-height: 1.6; margin-top: 14px; max-width: 54ch; text-wrap: pretty; }
.hero__sub b { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero__reassure { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--gray); }
.hero__reassure [data-lucide] { color: var(--green); }
.hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hero__chips .lbl { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-2); margin-right: 4px; }
.chip { font-size: .82rem; font-weight: 450; padding: 6px 13px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line-2); color: var(--ink-2); }
.hero__panel { position: relative; }
.hero__media { position: relative; width: 100%; height: clamp(380px, calc(100vh - 420px), 540px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 42%, rgba(20,20,20,.55) 100%); }
.hero__badge { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; background: rgba(246,246,244,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-md); }
.hb__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hb__top .ttl { font-weight: 600; font-size: .9rem; }
.hb__top .data-chip { margin-left: auto; }
.hb__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.hb__row .k { color: var(--gray-2); font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; }
.hb__row .v { font-weight: 600; }
.hb__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@media (max-width: 920px){ .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); } .hero__panel { display: block; } .hero__media { height: clamp(300px, 52vh, 440px); } }

/* ---------- trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: var(--cream); }
.trust__in { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); padding-block: var(--sp-5); }
.trust__item { display: flex; align-items: center; gap: 12px; }
.trust__item .ic { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 1.2rem; }
.trust__item b { display: block; font-weight: 600; font-size: .96rem; }
.trust__item span span { font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; color: var(--gray-2); }
@media (max-width: 800px){ .trust__in { grid-template-columns: repeat(2,1fr); gap: var(--sp-4) var(--sp-3); } }