/* ============================================================
   HEXPRS COMPONENT STYLES — Ported to Rohan FoxNutSource Theme
   ============================================================ */

/* ---- Google Fonts reference (Playfair Display + Inter) ---- */
/* Already loaded via link tag in HTML */

/* ---- Utility / Colour helpers ---- */
:root {
  --fn-green:  var(--primary-green);
  --fn-gold:   var(--accent-gold);
  --fn-slate:  var(--neutral-grey);
  --fn-cream:  var(--secondary-cream);
}
.playfair { font-family: 'Playfair Display', Georgia, serif; }
.italic    { font-style: italic; }

/* ===== HERO (Hexprs-style heading) ===== */
.hx-hero {
  padding: 7rem 1rem 3rem;
  min-height: 100vh;
  position: relative;
  background: var(--bg-white);
}
.hx-hero-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hero badge pill (hexprs style) */
.hx-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: 2rem;
  font-size: .75rem;
  cursor: pointer;
  transition: border-color .2s;
  text-decoration: none;
  color: inherit;
  width: fit-content;
  align-self: center;
}
.hx-badge:hover { border-color: rgba(44,95,45,.4); }
.hx-badge .ping { position: relative; display: flex; width: .5rem; height: .5rem; }
.hx-badge .ping-ring {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: var(--primary-green);
  opacity: .6;
  animation: fnc-ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
.hx-badge .ping-dot {
  position: relative;
  width: .5rem; height: .5rem;
  border-radius: 9999px;
  background: var(--primary-green);
}
.hx-badge-title  { font-size: .75rem; font-weight: 600; color: #374151; }
.hx-badge-div    { width: 1px; height: .75rem; background: #e5e7eb; }
.hx-badge-sub    { font-size: .75rem; font-weight: 500; color: #9ca3af; transition: color .2s; }
.hx-badge:hover .hx-badge-sub { color: var(--primary-green); }

/* Hero H1 — hexprs style */
.hx-h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #111827;
  margin-bottom: 2rem;
  padding: 0 .5rem;
}
.hx-h1 em { font-style: italic; }
.hx-h1 .green-em { color: var(--primary-green); }

/* Shimmer text (animated gradient sweep) */
.shimmer-text {
  background: linear-gradient(90deg, #111827 0%, #374151 35%, var(--primary-green) 50%, #374151 65%, #111827 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 4s linear infinite;
}
@keyframes shimmer-sweep { to { background-position: 200% center; } }
.underline-svg {
  position: absolute; bottom: -.5rem; left: 0;
  width: 100%; height: .75rem;
  color: rgba(212,175,55,.4);
}
.shimmer-block { position: relative; display: inline-block; }

/* Hero subtitle */
.hx-sub {
  max-width: 40rem;
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 2rem;
  padding: 0 1rem;
}
@media(min-width:768px){ .hx-sub { font-size: 1.125rem; } }

/* Hero CTA buttons (hexprs style) */
.hx-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
}
.hx-btn-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  height: 3rem; padding: 0 2rem;
  background: #111827; color: #fff;
  border-radius: 9999px;
  font-weight: 500; font-size: .875rem;
  overflow: hidden; cursor: pointer;
  border: none;
  transition: transform .2s;
  text-decoration: none;
}
.hx-btn-primary:hover { transform: translateY(-1px); }
.hx-btn-primary svg { transition: transform .2s; }
.hx-btn-primary:hover svg { transform: translateX(4px); }
.hx-btn-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-100%); transition: transform 1s;
}
.hx-btn-primary:hover .hx-btn-shine { transform: translateX(100%); }

.hx-btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 3rem; padding: 0 2rem;
  background: rgba(255,255,255,.5); backdrop-filter: blur(8px);
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  color: #374151; font-weight: 500; font-size: .875rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  text-decoration: none;
}
.hx-btn-secondary:hover { background: rgba(255,255,255,.8); }

/* ===== 3D HERO FRAME + FLOATING WIDGETS ===== */
.hx-frame-wrapper {
  position: relative;
  width: 100%; max-width: 72rem;
  padding: 3rem 1rem 5rem;
  display: flex; flex-direction: column; align-items: center;
  perspective: 1500px;
}
.hx-radial-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(44,95,45,.12), transparent 70%);
  pointer-events: none; z-index: -1;
}
.hx-frame {
  position: relative;
  width: 100%;
  border-radius: .75rem;
  border: 1px solid rgba(209,213,219,.4);
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
  background: #0f172a;
  /* overflow: hidden; */
  transform: scale(.92) rotateX(10deg);
  transform-origin: center bottom;
  transition: transform .8s ease;
  will-change: transform;
}
.hx-frame.visible { transform: scale(1) rotateX(0deg); }
.hx-frame-inner { position: relative; border-radius: .75rem; overflow: hidden; }
.hx-hero-img   { width: 100%; display: block;  object-fit: cover;}
.hx-img-overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.05); pointer-events: none; }

/* Widgets */
.hx-widget {
  position: absolute; z-index: 10;
  transform: scale(.8); opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.hx-widget.visible { transform: scale(1); opacity: 1; }
.hx-widget-tl { left: -8%; top: 5%;    transform-origin: left; }
.hx-widget-tr { right: -8%; top: 20%;  transform-origin: right; }
.hx-widget-bl { left: -8%; bottom: 25%;transform-origin: left; }
.hx-widget-br { right: -8%; bottom: 15%;transform-origin: right; }

/* Tablet: tuck widgets inside the frame */
@media(max-width:1024px){
  .hx-frame-wrapper { padding: 2rem 1rem 3rem; }
  .hx-widget-tl { left: 1%; top: 2%; }
  .hx-widget-tr { right: 1%; top: 10%; }
  .hx-widget-bl { left: 1%; bottom: 15%; }
  .hx-widget-br { right: 1%; bottom: 8%; }
  .hx-widget-card { min-width: 120px; padding: .5rem .875rem; gap: .5rem; }
}

/* Mobile: shrink widgets to fit inside frame */
@media(max-width:640px){
  .hx-frame-wrapper { padding: 1.5rem .5rem 2rem; }
  .hx-frame { transform: scale(1) rotateX(0deg) !important; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
  .hx-widget { transform-origin: top left; }
  .hx-widget.visible { transform: scale(.55); }
  .hx-widget-tl { left: 1%; top: 1%; }
  .hx-widget-tr { right: 1%; top: 6%; transform-origin: top right; }
  .hx-widget-bl { left: 1%; bottom: 8%; transform-origin: bottom left; }
  .hx-widget-br { right: 1%; bottom: 3%; transform-origin: bottom right; }
  .hx-widget-card { min-width: 100px; padding: .4rem .7rem; gap: .4rem; }
}
.hx-widget-card {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(2,6,23,.9); backdrop-filter: blur(12px);
  border: 1px solid;
  border-radius: 10px;
  padding: .75rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  min-width: 150px;
}
.hx-widget-card.em-brd  { border-color: rgba(44,95,45,.6); }
.hx-widget-card.gld-brd { border-color: rgba(212,175,55,.5); }
.hx-widget-card.blu-brd { border-color: rgba(59,130,246,.5); }
.hx-widget-card.wht-brd { border-color: rgba(255,255,255,.3); }
.hx-w-icon { flex-shrink: 0; }
.hx-w-icon.em  { color: var(--primary-green); }
.hx-w-icon.gld { color: var(--accent-gold); }
.hx-w-icon.blu { color: #3b82f6; }
.hx-w-icon.wht { color: #fff; }
.hx-w-title { font-size: .625rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .05em; }
.hx-w-sub   { font-size: .625rem; font-family: monospace; }
.hx-w-sub.em  { color: var(--primary-green); }
.hx-w-sub.gld { color: var(--accent-gold); }
.hx-w-sub.blu { color: #3b82f6; }

/* ===== REVIEW SCROLLER (hexprs testimonials) ===== */
.hx-reviews {
  padding: 6rem 1rem;
  background: var(--bg-white);
  overflow: hidden;
}
.hx-reviews-inner {
  max-width: 80rem; margin: 0 auto;
}
.hx-reviews-head {
  margin-bottom: 3rem;
}
@media(min-width:1024px){
  .hx-reviews-inner  { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .hx-reviews-head   { margin-bottom: 0; }
}
.hx-rev-h2 { font-size: clamp(2rem, 3vw, 3rem); color: var(--primary-green); line-height: 1.2; }
.hx-rev-p  { margin-top: 1.5rem; font-size: 1rem; color: var(--neutral-grey); max-width: 28rem; line-height: 1.7; }
.hx-rev-cta { margin-top: 2.5rem; }
.hx-rev-line { width: 3rem; height: 2px; background: var(--accent-gold); margin-bottom: 1rem; }
.hx-rev-btn {
  background: none; border: none; cursor: pointer;
  color: var(--primary-green); font-weight: 700; font-size: .875rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: gap .2s; text-decoration: none;
}
.hx-rev-btn:hover { gap: 1rem; }

.hx-reviews-area {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-height: 640px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.hx-review-col { display: flex; flex-direction: column; gap: 1rem; }
.hx-col-up   { animation: hxScrollUp 20s linear infinite; }
.hx-col-down { animation: hxScrollDown 24s linear infinite; margin-top: -3rem; }
@keyframes hxScrollUp   { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hxScrollDown { from { transform: translateY(-25%); } to { transform: translateY(25%); } }
.hx-review-col:hover { animation-play-state: paused; }

.hx-rcard {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: border-color .2s;
}
.hx-rcard:hover { border-color: var(--accent-gold); }
.hx-stars { color: var(--accent-gold); font-size: .75rem; letter-spacing: .05em; margin-bottom: .75rem; }
.hx-rcard p { font-size: .82rem; color: #475569; line-height: 1.6; margin-bottom: 1rem; }
.hx-r-author { display: flex; align-items: center; gap: .75rem; }
.hx-r-hex {
  width: 2.5rem; height: 2.5rem;
  background: linear-gradient(135deg, var(--accent-gold), #b8962e);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex-shrink: 0; transition: transform .3s;
}
.hx-rcard:hover .hx-r-hex { transform: rotate(12deg); }
.hx-r-author strong { display: block; font-size: .75rem; color: #0f172a; font-weight: 700; }
.hx-r-author small  { font-size: .625rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; }

/* ===== STEPS (hexprs style) in rohan pages ===== */
.hx-steps { padding: 6rem 1rem; background: #fff; border-top: 1px solid #f1f5f9; }
.hx-steps-inner {
  max-width: 80rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media(min-width:1024px){ .hx-steps-inner { grid-template-columns: 1fr 1fr; } }
/* .hx-steps-sticky { } */
@media(min-width:1024px){ .hx-steps-sticky { position: sticky; top: 8rem; height: fit-content; } }
.hx-steps-h2 { font-size: clamp(2.5rem, 4vw, 3.75rem); color: var(--primary-green); line-height: 1.15; }
.hx-steps-p  { margin-top: 1.5rem; color: var(--neutral-grey); max-width: 24rem; font-size: 1.1rem; line-height: 1.7; }
.hx-steps-right { display: flex; flex-direction: column; gap: 5rem; }
@media(min-width:1024px){ .hx-steps-right { gap: 8rem; } }
.hx-step-item { display: flex; flex-direction: column; }
.hx-step-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(4rem, 6vw, 6rem);
  color: var(--secondary-cream);
  transition: color .5s; line-height: 1;
}
.hx-step-item:hover .hx-step-num { color: rgba(212,175,55,.3); }
.hx-step-body {
  margin-top: -1.5rem; padding-left: 1rem;
  border-left: 2px solid var(--secondary-cream);
  transition: border-color .5s;
}
.hx-step-item:hover .hx-step-body { border-left-color: var(--accent-gold); }
.hx-step-h3 { font-size: 1.5rem; font-weight: 700; color: var(--primary-green); margin-bottom: .75rem; }
.hx-step-p  { color: var(--neutral-grey); font-size: 1rem; line-height: 1.7; max-width: 28rem; }

/* ===== PAGE BADGE (hexprs AboutUs style, adapted) ===== */
.page-badge-fnc {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem; border-radius: 9999px;
  background: rgba(44,95,45,.08);
  border: 1px solid rgba(44,95,45,.22);
  margin-bottom: 1.5rem;
}
.page-badge-fnc svg { color: var(--primary-green); }
.page-badge-fnc span { font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--primary-green); }

/* ===== VALUES DARK SECTION (hexprs AboutUs ported) ===== */
.fnc-values {
  padding: 6rem 1.5rem;
  background: #0c1117;
  position: relative; overflow: hidden;
}
.fnc-values::before {
  content: '';
  position: absolute; top: -10rem; left: 50%; transform: translateX(-50%);
  width: 40rem; height: 40rem;
  background: rgba(44,95,45,.08); border-radius: 9999px; filter: blur(100px);
  pointer-events: none;
}
.fnc-values-inner { max-width: 80rem; margin: 0 auto; position: relative; z-index: 1; }
.fnc-values-h2  { font-size: clamp(2rem,4vw,3rem); color: #fff; margin-bottom: 1rem; }
.fnc-values-sub { color: #64748b; font-size: 1rem; max-width: 32rem; line-height: 1.7; margin-bottom: 3rem; }
.fnc-values-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media(min-width:768px){  .fnc-values-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1024px){ .fnc-values-grid { grid-template-columns: repeat(4, 1fr); } }
.fnc-val-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1.25rem; padding: 1.75rem;
  transition: background .2s, border-color .2s;
}
.fnc-val-card:hover { background: rgba(255,255,255,.07); border-color: rgba(44,95,45,.25); }
.fnc-val-dot  { width: .5rem; height: .5rem; background: var(--accent-gold); border-radius: 9999px; margin-bottom: 1rem; }
.fnc-val-h    { font-size: .875rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.fnc-val-p    { font-size: .8125rem; color: #475569; line-height: 1.7; }

/* ===== PILLAR CARDS (hexprs AboutUs ported) ===== */
.fnc-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; margin-top: 3rem;
}
.fnc-pillar-card {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 1.5rem;
  padding: 2rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
.fnc-pillar-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(44,95,45,.04), transparent);
  pointer-events: none;
}
.fnc-pillar-card:hover { border-color: rgba(212,175,55,.4); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.fnc-pillar-icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  background: rgba(44,95,45,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-green); margin-bottom: 1.25rem;
  transition: background .2s, color .2s;
}
.fnc-pillar-card:hover .fnc-pillar-icon { background: var(--primary-green); color: #fff; }
.fnc-pillar-h { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.fnc-pillar-p { font-size: .875rem; color: #64748b; line-height: 1.7; }

/* ===== IMPACT ITEMS (hexprs AboutUs ported) ===== */
.fnc-impact-grid {
  display: grid; gap: 1rem; margin-top: 3rem; text-align: left;
  grid-template-columns: 1fr;
}
@media(min-width:640px){ .fnc-impact-grid { grid-template-columns: 1fr 1fr; } }
.fnc-impact-item {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 1rem;
  padding: 1.25rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: border-color .2s; cursor: default;
}
.fnc-impact-item:hover { border-color: rgba(212,175,55,.4); }
.fnc-impact-dot {
  width: .5rem; height: .5rem;
  background: var(--accent-gold); border-radius: 9999px;
  flex-shrink: 0; transition: transform .2s;
}
.fnc-impact-item:hover .fnc-impact-dot { transform: scale(1.5); }
.fnc-impact-text { font-size: .9375rem; font-weight: 500; color: #0f172a; }

/* ===== CTA BOX (hexprs style adapted) ===== */
.hx-cta-box {
  background: #0f172a; border-radius: 3rem;
  padding: 3rem 1.5rem; overflow: hidden;
  text-align: center; position: relative;
  margin: 3rem auto; max-width: 48rem;
}
@media(min-width:768px){ .hx-cta-box { padding: 6rem; } }
.hx-cta-box::before {
  content: ''; position: absolute; top: -6rem; right: -6rem;
  width: 16rem; height: 16rem;
  background: rgba(44,95,45,.06); border-radius: 9999px; filter: blur(60px);
}
.hx-cta-h { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem,3vw,2.5rem); color: #fff; margin-bottom: .75rem; }
.hx-cta-sub { color: rgba(148,163,184,.7); font-size: .9375rem; margin-bottom: 2rem; line-height: 1.7; }
.hx-cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 2.5rem; background: var(--primary-green); color: #fff;
  font-weight: 700; border-radius: .75rem; font-size: .9375rem;
  transition: transform .2s, box-shadow .2s; text-decoration: none;
  border: none; cursor: pointer;
}
.hx-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,95,45,.4); }

/* ===== PAGE HERO (inner pages) ===== */
.page-hx-hero {
  min-height: 70vh;
  display: flex; align-items: center;
  padding: 9rem 1.5rem 5rem;
  background: var(--bg-white);
  position: relative;
  overflow: hidden;
}
.page-hx-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(44,95,45,.06), transparent);
  pointer-events: none;
}
.page-hx-inner {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
  position: relative; z-index: 1;
}
@media(min-width:1024px){ .page-hx-inner { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Blob SVG wrap (AboutUs hero visual) */
.blob-wrap { position: relative; display: flex; justify-content: center; align-items: center; }
.blob-glow {
  position: absolute; width: 20rem; height: 20rem;
  background: rgba(44,95,45,.15); border-radius: 9999px;
  filter: blur(80px);
  animation: blob-pulse 3s ease-in-out infinite;
}
@keyframes blob-pulse { 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.1); opacity:.3; } }
.blob-logo { width: 14rem; height: 14rem; position: relative; z-index: 1; }
@media(min-width:768px){ .blob-logo { width: 20rem; height: 20rem; } }

/* Floating Blurred Makhanas Video Background */
.bg-makhana {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  animation: float-makhana 7s ease-in-out infinite alternate;
}
.bg-sc1 { width: 140px; left: -25%; top: 2%; filter: blur(2px); animation-delay: 0s; opacity: 0.6; }
.bg-sc2 { width: 200px; left: -50%; bottom: 10%; filter: blur(10px); animation-delay: 1.5s; opacity: 0.45; }
.bg-sc3 { width: 110px; left: 8%; top: -15%; filter: blur(6px); animation-delay: 3s; opacity: 0.7; }
.bg-sc4 { width: 190px; right: -30%; top: -2%; filter: blur(10px); animation-delay: 0.5s; opacity: 0.5; }
.bg-sc5 { width: 220px; right: -65%; bottom: 15%; filter: blur(3px); animation-delay: 2.5s; opacity: 0.4; }
.bg-sc6 { width: 130px; right: 15%; bottom: -18%; filter: blur(7px); animation-delay: 4s; opacity: 0.65; }

@keyframes float-makhana {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  100% { transform: translateY(-30px) rotate(15deg) scale(1.05); }
}