/* ============================================================
   HOME3D.CSS — HandyGoan 3D Homepage
   White + Orange + Black theme. Drop alongside style.css.
   ============================================================ */

/* ── FONTS / VARS ── */
.hg-hero, .hg-hero *, .hg-big-title, .hg-h1, .hg-h2,
.hg-cta-h2, .hg-video-h2, .hg-gallery-heading,
.hg-scroll-text-section, .hg-srl, .hg-hero-ghost,
.hg-eyebrow, .hg-eyebrow-sm, .hg-mono,
.hg-marquee-wrap, .hg-m-item, .hg-stat-num,
.hg-parallax-text { font-family: inherit; }

:root {
  --hg-white: #ffffff;
  --hg-off: #f7f4f0;
  --hg-black: #0d0d0d;
  --hg-orange: #ff5500;
  --hg-orange2: #ff7733;
  --hg-pale: #fff0ea;
  --hg-grey: #888;
  --hg-lgrey: #e8e4df;
  --hg-dgrey: #333;
}

/* ── UTILITIES ── */
.hg-orange { color: var(--hg-orange) !important; }
.hg-grey { color: var(--hg-grey); }
.hg-outline {
  color: transparent !important;
  -webkit-text-stroke: 2px var(--hg-black);
}
.hg-mono { font-family: 'DM Mono', monospace; }
.hg-container { max-width: 1300px; margin: 0 auto; padding: 0 64px; }
.hg-section { padding: 100px 0; }
.hg-bg-off { background: var(--hg-off) !important; }
.hg-flex-between { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }

/* ── TYPOGRAPHY ── */
.hg-big-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 8rem);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--hg-black);
}
.hg-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--hg-black);
  margin-bottom: 24px;
}
.hg-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  color: var(--hg-orange);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: hgSlideUp .7s .1s ease forwards;
}
.hg-eyebrow-sm {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  color: var(--hg-orange);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.hg-p { font-size: 1.02rem; color: var(--hg-dgrey); line-height: 1.75; margin-bottom: 32px; }

/* ── BUTTONS ── */
.hg-btn-primary {
  display: inline-block;
  background: var(--hg-orange);
  color: white !important;
  padding: 16px 36px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 30px rgba(255,85,0,.35);
}
.hg-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 50px rgba(255,85,0,.5);
  color: white !important;
}
.hg-btn-outline {
  display: inline-block;
  border: 2px solid var(--hg-black);
  color: var(--hg-black) !important;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all .2s;
}
.hg-btn-outline:hover { background: var(--hg-black); color: white !important; }
.hg-btn-white {
  display: inline-block;
  background: white;
  color: var(--hg-orange) !important;
  padding: 18px 40px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all .2s;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
}
.hg-btn-white:hover { background: var(--hg-black); color: white !important; transform: translateY(-2px); }
.hg-btn-dark-outline {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.4);
  color: white !important;
  padding: 16px 36px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all .2s;
}
.hg-btn-dark-outline:hover { border-color: white; background: rgba(255,255,255,.1); }

/* ── LIVE BADGE ── */
.hg-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hg-orange);
  color: white;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hg-live-dot {
  width: 7px; height: 7px;
  background: white;
  border-radius: 50%;
  animation: hgBlink 1.5s infinite;
  flex-shrink: 0;
}
@keyframes hgBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hg-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 64px 80px;
  overflow: hidden;
  background: var(--hg-white);
}

.hg-hero-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  animation: hgGhostDrift 20s ease-in-out infinite alternate;
}
@keyframes hgGhostDrift {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(-50%,-48%) scale(1.02); }
}

.hg-hero-topright {
  position: absolute;
  top: 110px; right: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

/* ══════════════════════════════════════════
   HERO (V2 OVERRIDES)
   - keeps same content/photos, redesigned layout
══════════════════════════════════════════ */
.hg-hero.hg-hero--v2{
  min-height: calc(100vh - 24px);
  padding: 34px 0 56px;
  justify-content: center;
  background: #ffffff;
}
.hg-hero--v2 .hg-hero-bg{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1000px 520px at 12% 15%, rgba(249,115,22,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 25%, rgba(29,78,216,.12), transparent 55%),
    radial-gradient(900px 520px at 45% 95%, rgba(2,6,23,.06), transparent 60%);
  pointer-events:none;
}
.hg-hero--v2 .hg-hero-ghost,
.hg-hero--v2 .hg-hero-topright,
.hg-hero--v2 .hg-hero-inner,
.hg-hero--v2 .hg-hero-grid,
.hg-hero--v2 .hg-hero-copy,
.hg-hero--v2 .hg-hero-media{ display:none !important; }

.hg-hero--v2 .hg-hero-wrap{
  position:relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: center;
}
.hg-hero--v2 .hg-hero-left{ max-width: 760px; }
.hg-hero--v2 .hg-hero-title{ line-height: .92; }
.hg-hero--v2 .hg-hero-sub{
  font-size: 1.05rem;
  color: rgba(17,24,39,.78);
  max-width: 62ch;
  margin-top: 14px;
}

.hg-hero--v2 .hg-hero-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.hg-hero--v2 .hg-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  color: rgba(17,24,39,.72);
  font-size: .92rem;
}
.hg-hero--v2 .hg-chip i{ color: var(--hg-orange); }

.hg-hero--v2 .hg-hero-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.hg-hero--v2 .hg-mini{
  border-radius: 18px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.75);
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  padding: 12px 14px;
}
.hg-hero--v2 .hg-mini-num{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  color: rgba(2,6,23,.92);
}
.hg-hero--v2 .hg-mini-lbl{
  margin-top: 2px;
  font-size: .82rem;
  color: rgba(17,24,39,.62);
}

.hg-hero--v2 .hg-hero-right{ width: 100%; }
.hg-hero--v2 .hg-hero-card{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(229,231,235,.92);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(2,6,23,.14);
  padding: 14px;
  overflow: hidden;
}
.hg-hero--v2 .hg-hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(249,115,22,.22), rgba(29,78,216,.18), rgba(2,6,23,0));
  filter: blur(18px);
  opacity: .55;
  pointer-events:none;
}
.hg-hero--v2 .hg-hero-card > *{ position:relative; z-index:2; }

.hg-hero--v2 .hg-hero-card-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hg-hero--v2 .hg-hero-floats{
  position:absolute;
  inset: 0;
  pointer-events:none;
}
.hg-hero--v2 .hg-float-card{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(229,231,235,.92);
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 55px rgba(2,6,23,.16);
  transform: translateZ(0);
  animation: hgFloaty 7.5s ease-in-out infinite;
}
.hg-hero--v2 .hg-float-card:nth-child(1){ left: 14px; top: 74px; animation-delay: .0s; }
.hg-hero--v2 .hg-float-card:nth-child(2){ right: 14px; top: 160px; animation-delay: .8s; }
.hg-hero--v2 .hg-float-card:nth-child(3){ left: 20px; bottom: 18px; animation-delay: 1.4s; }
.hg-hero--v2 .hg-float-ico{ font-size: 1.2rem; }
.hg-hero--v2 .hg-float-t{ font-weight: 900; font-size: .92rem; letter-spacing: -0.01em; }
.hg-hero--v2 .hg-float-s{ font-size: .8rem; color: rgba(17,24,39,.6); margin-top: 1px; }

@keyframes hgFloaty{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-8px); }
}

@media (max-width: 992px){
  .hg-hero.hg-hero--v2{ padding: 28px 0 44px; }
  .hg-hero--v2 .hg-hero-wrap{ grid-template-columns: 1fr; }
  .hg-hero--v2 .hg-hero-card{ max-width: 720px; margin: 0 auto; }
}
@media (max-width: 576px){
  .hg-hero.hg-hero--v2{ min-height: auto; padding: 22px 0 34px; }
  .hg-hero--v2 .hg-hero-mini{ grid-template-columns: 1fr 1fr; }
  .hg-hero--v2 .hg-float-card{ display:none; }
}

/* Sliding image strip */
.hg-img-strip {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  overflow: hidden;
  z-index: 1;
}
.hg-img-strip::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(to right, white 0%, transparent 30%);
  z-index: 2;
}
.hg-img-slider {
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: hgSlideVert 14s linear infinite;
}
@keyframes hgSlideVert {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.hg-img-slide {
  position: relative;
  width: 100%;
  height: calc(100vh / 6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hg-img-slide img { width:100%; height:100%; object-fit:cover; }
.s-orange  { background: linear-gradient(135deg,#ff5500,#ff8844); }
.s-dark    { background: linear-gradient(135deg,#1a1a1a,#333); }
.s-light   { background: linear-gradient(135deg,#f7f4f0,#e0d8d0); }
.s-orange2 { background: linear-gradient(135deg,#ff4400,#cc3300); }
.s-dark2   { background: linear-gradient(135deg,#0d0d0d,#222); }
.s-light2  { background: linear-gradient(135deg,#fff0ea,#ffd4c0); }
.hg-slide-icon { font-size: 4rem; z-index: 1; }
.hg-slide-label {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0,0,0,.3);
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 3;
}



/* HERO OVERLAY */
.hg-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items:end;
  width: 100%;
}
.hg-hero-copy{
  max-width: 760px;
}
.hg-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(17,24,39,.75);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(229,231,235,.9);
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
}
.hg-hero-sub{
  font-size: 1.05rem;
  color: rgba(17,24,39,.78);
  max-width: 56ch;
  margin-top: 14px;
}
.hg-hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  align-items:center;
}
.hg-btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.65);
  color: var(--hg-black);
  text-decoration:none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  transition: 180ms ease;
}
.hg-btn-ghost:hover{ transform: translateY(-1px); }
.hg-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
  color: rgba(17,24,39,.68);
  font-size: .92rem;
}
.hg-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}
.hg-badge i{ color: var(--hg-orange); }

/* Make slider pop (no delayed feeling) */
.hg-photo-slider{ animation: hgFadeIn .35s ease-out both; }
@keyframes hgFadeIn{ from{ opacity:0; transform: translateY(8px) scale(.99);} to{ opacity:1; transform:none;} }

/* Scroll reveal split (text + image placeholder) */
.hg-scroll-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}
.hg-scroll-visual{
  border-radius: 22px;
  border: 1px solid rgba(229,231,235,.9);
  background: #fff;
  box-shadow: 0 16px 50px rgba(0,0,0,.10);
  overflow:hidden;
  position: relative;
  min-height: 320px;
}
.hg-scroll-visual img{ width:100%; height:100%; object-fit: cover; display:block; }
.hg-scroll-visual .hg-p-label{
  position:absolute;
  left: 14px; bottom: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(229,231,235,.9);
  backdrop-filter: blur(10px);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.85);
}

/* Gallery cards with image placeholders */
.hg-g-card{
  position: relative;
}
.hg-g-card .hg-g-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.hg-g-card .hg-g-overlay{ background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.60)); }
.hg-g-card:hover .hg-g-img{ transform: scale(1.06); transition: 420ms ease; }

@media (max-width: 992px){
  .hg-hero{ padding: 16px 18px 56px; }
  .hg-container{ padding: 0 18px; }
  .hg-hero-grid{ grid-template-columns: 1fr; }
  .hg-scroll-split{ grid-template-columns: 1fr; }
  .hg-scroll-visual{ min-height: 220px; }
}
.hg-hero-inner { position: relative; z-index: 2; }

.hg-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 12vw, 14rem);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--hg-black);
  margin-bottom: 0;
}
.hg-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: hgWordReveal .8s ease forwards;
}
.hg-word:nth-child(1) { animation-delay: 0s; }
.hg-word:nth-child(2) { animation-delay: .06s; }
.hg-word:nth-child(3) { animation-delay: .12s; }
.hg-word:nth-child(4) { animation-delay: .18s; }
@keyframes hgWordReveal { to { opacity:1; transform:translateY(0); } }

.hg-hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 40px;
  flex-wrap: wrap;
  gap: 32px;
}
.hg-hero-sub {
  font-size: 1.05rem;
  color: var(--hg-dgrey);
  line-height: 1.7;
  max-width: 420px;
  opacity: 0;
  animation: hgSlideUp .7s .9s ease forwards;
}
.hg-hero-sub strong { color: var(--hg-orange); font-weight: 700; }
.hg-hero-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  opacity: 0;
  animation: hgSlideUp .7s 1.1s ease forwards;
}

.hg-scroll-hint {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  color: var(--hg-grey);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0;
  animation: hgFadeIn .8s 1.5s ease forwards;
  z-index: 2;
}
.hg-scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--hg-orange), transparent);
  animation: hgScrollLine 2s ease-in-out infinite;
}
@keyframes hgScrollLine { 0%{height:0;opacity:1} 100%{height:60px;opacity:0} }

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.hg-marquee-wrap {
  background: var(--hg-orange);
  overflow: hidden;
  padding: 18px 0;
}
.hg-marquee-inner {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: hgMarqueeScroll 22s linear infinite;
}
.hg-marquee-inner:hover { animation-play-state: paused; }
@keyframes hgMarqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hg-m-item {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: white;
  letter-spacing: .08em;
  padding: 0 32px;
}
.hg-m-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.hg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hg-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hg-lgrey);
  border: 1px solid var(--hg-lgrey);
}
.hg-stat-box {
  background: var(--hg-white);
  padding: 40px 32px;
  transition: background .3s;
  cursor: default;
}
.hg-stat-box:hover { background: var(--hg-pale); }
.hg-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4.5rem;
  color: var(--hg-orange);
  line-height: 1;
  margin-bottom: 8px;
}
.hg-stat-lbl { font-size: .82rem; color: var(--hg-grey); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* ══════════════════════════════════════════
   SOLUTIONS
══════════════════════════════════════════ */
.hg-section-head { margin-bottom: 64px; }
.hg-sols-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hg-lgrey);
  border: 1px solid var(--hg-lgrey);
}
.hg-sol-item {
  background: var(--hg-white);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .35s cubic-bezier(.23,1,.32,1);
}
.hg-sol-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: var(--hg-orange);
  transition: height .35s cubic-bezier(.23,1,.32,1);
  z-index: 0;
}
.hg-sol-item:hover .hg-sol-fill { height: 100%; }
.hg-sol-num, .hg-sol-icon, .hg-sol-name, .hg-sol-desc, .hg-sol-arrow { position: relative; z-index: 1; }
.hg-sol-num { font-family: 'DM Mono', monospace; font-size: .65rem; color: var(--hg-grey); letter-spacing: .12em; margin-bottom: 32px; transition: color .3s; }
.hg-sol-icon { font-size: 2.5rem; margin-bottom: 20px; transition: transform .3s; }
.hg-sol-item:hover .hg-sol-icon { transform: scale(1.15) rotate(-5deg); }
.hg-sol-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--hg-black); margin-bottom: 12px; transition: color .3s; }
.hg-sol-desc { font-size: .8rem; color: var(--hg-grey); line-height: 1.6; flex: 1; transition: color .3s; }
.hg-sol-arrow { margin-top: 24px; font-size: 1.2rem; color: var(--hg-orange); align-self: flex-end; transition: all .3s; }
.hg-sol-item:hover .hg-sol-num,
.hg-sol-item:hover .hg-sol-name,
.hg-sol-item:hover .hg-sol-desc,
.hg-sol-item:hover .hg-sol-arrow { color: white; }
.hg-sol-item:hover .hg-sol-arrow { transform: translate(4px,-4px); }

/* ══════════════════════════════════════════
   SCROLL TEXT REVEAL
══════════════════════════════════════════ */
.hg-scroll-text-section {
  padding: 120px 64px;
  background: var(--hg-white);
  overflow: hidden;
}
.hg-srl {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 8vw, 9rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--hg-lgrey);
  transition: color .6s ease, transform .6s ease;
  transform: translateX(-20px);
}
.hg-srl.hg-lit { color: var(--hg-black); transform: translateX(0); }
.hg-srl .hg-orange { color: var(--hg-lgrey); transition: color .6s ease; }
.hg-srl.hg-lit .hg-orange { color: var(--hg-orange) !important; }

/* ══════════════════════════════════════════
   GALLERY
══════════════════════════════════════════ */
.hg-gallery-section { padding: 100px 0 0; background: var(--hg-white); overflow: hidden; }
.hg-gallery-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: .9;
  color: var(--hg-black);
  white-space: nowrap;
}
.hg-gallery-track {
  display: flex;
  gap: 20px;
  padding: 60px 64px 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.hg-gallery-track::-webkit-scrollbar { display: none; }
.hg-gallery-track:active { cursor: grabbing; }
.hg-gallery-hint { text-align: center; padding: 8px 0 40px; font-size: .75rem; color: var(--hg-grey); letter-spacing: .1em; }
.hg-g-card {
  position: relative;
  width: 360px; height: 460px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.hg-g-card:hover { transform: perspective(800px) rotateX(-3deg) rotateY(3deg) scale(1.03); }
.hg-g-icon { font-size: 6rem; position: relative; z-index: 1; transition: transform .4s; }
.hg-g-card:hover .hg-g-icon { transform: scale(1.12); }
.hg-g-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.7),transparent 50%); opacity: 0; transition: opacity .3s; }
.hg-g-card:hover .hg-g-overlay { opacity: 1; }
.hg-g-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; transform: translateY(10px); opacity: 0; transition: all .35s; z-index: 2; }
.hg-g-card:hover .hg-g-info { opacity: 1; transform: translateY(0); }
.hg-g-title { font-weight: 700; font-size: 1.1rem; color: white; }
.hg-g-sub { font-size: .78rem; color: rgba(255,255,255,.7); margin-top: 4px; }
.g-bg-1 { background: linear-gradient(135deg,#ff5500,#ff8844); }
.g-bg-2 { background: linear-gradient(135deg,#1a1a1a,#444); }
.g-bg-3 { background: linear-gradient(135deg,#f7f4f0,#c8bfb5); }
.g-bg-4 { background: linear-gradient(135deg,#ff3300,#ff6644); }
.g-bg-5 { background: linear-gradient(135deg,#333,#666); }
.g-bg-6 { background: linear-gradient(135deg,#ffe0d4,#ffb89a); }

/* ══════════════════════════════════════════
   MOSAIC
══════════════════════════════════════════ */
.hg-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2px;
  background: var(--hg-lgrey);
}
.hg-mosaic-main, .hg-mosaic-side {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hg-mosaic-main { height: 520px; }
.hg-mosaic-side { height: 260px; }
.hg-mosaic-side-col { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.hg-mosaic-icon { font-size: 5rem; transition: transform .7s cubic-bezier(.23,1,.32,1); z-index: 1; }
.hg-mosaic-main .hg-mosaic-icon { font-size: 8rem; }
.hg-mosaic-main:hover .hg-mosaic-icon, .hg-mosaic-side:hover .hg-mosaic-icon { transform: scale(1.1); }
.hg-mosaic-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: white;
  transform: translateY(10px); opacity: 0;
  transition: all .3s; z-index: 2;
}
.hg-mosaic-main:hover .hg-mosaic-cap, .hg-mosaic-side:hover .hg-mosaic-cap { opacity: 1; transform: translateY(0); }
.hg-mc-t { font-weight: 700; font-size: .95rem; }
.hg-mc-s { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: 3px; }
.hg-m-bg-1 { background: linear-gradient(135deg,#ff5500,#ff3300); }
.hg-m-bg-2 { background: linear-gradient(135deg,#1a1a1a,#3d3d3d); }
.hg-m-bg-3 { background: linear-gradient(135deg,#f7f4f0,#e0d5c9); }
.hg-m-bg-4 { background: linear-gradient(135deg,#ff6644,#ff9977); }
.hg-m-bg-5 { background: linear-gradient(135deg,#222,#555); }

/* ══════════════════════════════════════════
   PARALLAX
══════════════════════════════════════════ */
.hg-parallax {
  position: relative;
  height: 60vh;
  overflow: hidden;
}
.hg-parallax-bg {
  width: 100%; height: 130%;
  position: absolute; top: -15%;
  background: linear-gradient(135deg, #ff5500 0%, #1a1a1a 100%);
  will-change: transform;
  display: flex; align-items: center; justify-content: center;
  font-size: 8rem;
}
.hg-parallax-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.hg-parallax-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  color: white;
  letter-spacing: .05em;
  text-align: center;
  z-index: 2;
}

/* ══════════════════════════════════════════
   VIDEO SECTION
══════════════════════════════════════════ */
.hg-video-section {
  padding: 100px 64px;
  background: var(--hg-black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hg-video-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .95;
  color: var(--hg-white);
  margin-bottom: 24px;
}
.hg-video-p { font-size: 1rem; color: rgba(255,255,255,.55); line-height: 1.75; margin-bottom: 36px; }
.hg-video-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding: 0; }
.hg-video-list li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: rgba(255,255,255,.7); }
.hg-vl-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--hg-orange);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hg-vl-dot::after { content: '✓'; font-size: .55rem; color: white; font-weight: 900; }
.hg-video-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
.hg-video-badge {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  background: var(--hg-orange); color: white;
  padding: 6px 14px; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.hg-video-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}
.hg-play-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--hg-orange);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  padding-left: 5px;
  animation: hgPlayPulse 2s infinite;
  transition: transform .2s;
  color: white;
}
.hg-play-btn:hover { transform: scale(1.1); }
@keyframes hgPlayPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,85,0,.5); }
  50%      { box-shadow: 0 0 0 20px rgba(255,85,0,0); }
}
.hg-vp-text { font-size: .8rem; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; }

/* ══════════════════════════════════════════
   PRODUCTS
══════════════════════════════════════════ */
.hg-prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--hg-lgrey);
}
.hg-prod-item {
  background: var(--hg-white);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  display: block;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.hg-prod-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.hg-prod-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}
.hg-prod-item:hover .hg-prod-img,
.hg-prod-item:hover .hg-prod-placeholder { transform: scale(1.06); }
.p-c1 { background: linear-gradient(135deg,#fff0ea,#ffd4c0); }
.p-c2 { background: linear-gradient(135deg,#f7f4f0,#e8e0d8); }
.p-c3 { background: linear-gradient(135deg,#1a1a1a,#333); color: white; }
.p-c4 { background: linear-gradient(135deg,#ff5500,#ff8844); }
.p-c5 { background: linear-gradient(135deg,#f7f4f0,#ddd); }
.p-c6 { background: linear-gradient(135deg,#0d0d0d,#222); color: white; }
.hg-prod-info { padding: 24px; }
.hg-prod-tag { font-size: .65rem; font-weight: 700; color: var(--hg-orange); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.hg-prod-name { font-size: 1rem; font-weight: 700; color: var(--hg-black); }
.hg-prod-price { font-size: .9rem; color: var(--hg-orange); font-weight: 700; margin-top: 4px; }
.hg-prod-line { width: 28px; height: 2px; background: var(--hg-orange); margin: 10px 0 0; transition: width .3s; }
.hg-prod-item:hover .hg-prod-line { width: 48px; }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.hg-testi-wrap { overflow: hidden; }
.hg-testi-track {
  display: flex; gap: 28px;
  padding: 0 64px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hg-testi-track::-webkit-scrollbar { display: none; }
.hg-testi-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
  background: var(--hg-white);
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid var(--hg-lgrey);
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.hg-testi-card::after {
  content: '"';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12rem; line-height: .5;
  position: absolute; top: 16px; right: 16px;
  color: rgba(255,85,0,.07);
  pointer-events: none;
}
.hg-testi-card:hover { border-color: var(--hg-orange); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(255,85,0,.08); }
.hg-testi-stars { color: var(--hg-orange); font-size: 1rem; letter-spacing: 3px; margin-bottom: 18px; }
.hg-testi-text { font-size: .92rem; line-height: 1.75; color: var(--hg-dgrey); margin-bottom: 24px; font-style: italic; }
.hg-testi-by { font-weight: 700; font-size: .82rem; color: var(--hg-black); }
.hg-testi-by span { color: var(--hg-orange); }
.hg-testi-dots { display: flex; gap: 12px; justify-content: center; margin-top: 36px; }
.hg-testi-dot {
  width: 8px; height: 8px; border-radius: 100px;
  background: var(--hg-lgrey); border: none; cursor: pointer;
  transition: all .3s; padding: 0;
}
.hg-testi-dot.hg-active { width: 28px; background: var(--hg-orange); }

/* ══════════════════════════════════════════
   BLOGS
══════════════════════════════════════════ */
.hg-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hg-blog-card {
  background: var(--hg-white);
  border: 1px solid var(--hg-lgrey);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  display: block;
  transition: all .3s;
}
.hg-blog-card:hover { border-color: var(--hg-orange); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(255,85,0,.08); }
.hg-blog-img { width: 100%; height: 200px; overflow: hidden; }
.hg-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hg-blog-card:hover .hg-blog-img img { transform: scale(1.06); }
.hg-blog-placeholder { background: linear-gradient(135deg,#fff0ea,#ffd4c0); display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.hg-blog-info { padding: 24px; }
.hg-blog-tag { font-size: .65rem; font-weight: 700; color: var(--hg-orange); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 10px; }
.hg-blog-title { font-size: 1.05rem; font-weight: 700; color: var(--hg-black); margin-bottom: 10px; line-height: 1.4; }
.hg-blog-excerpt { font-size: .82rem; color: var(--hg-grey); line-height: 1.6; margin-bottom: 16px; }
.hg-blog-cta { font-size: .82rem; font-weight: 700; color: var(--hg-orange); }

/* ══════════════════════════════════════════
   CLIENTS
══════════════════════════════════════════ */
.hg-clients-strip {
  padding: 60px 0;
  overflow: hidden;
  border-top: 1px solid var(--hg-lgrey);
  border-bottom: 1px solid var(--hg-lgrey);
  background: var(--hg-white);
}
.hg-clients-label { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-grey); margin-bottom: 32px; }
.hg-clients-track {
  display: flex; gap: 20px;
  width: max-content;
  animation: hgMarqueeScroll 22s linear infinite;
  padding: 0 20px;
}
.hg-clients-track:hover { animation-play-state: paused; }
.hg-client-pill {
  background: var(--hg-off);
  border: 1px solid var(--hg-lgrey);
  border-radius: 100px;
  padding: 12px 28px;
  font-size: .875rem; font-weight: 600;
  color: var(--hg-grey);
  white-space: nowrap;
  transition: all .3s;
}
.hg-client-pill:hover { color: var(--hg-orange); border-color: var(--hg-orange); }

/* ══════════════════════════════════════════
   CTA
══════════════════════════════════════════ */
.hg-cta-section {
  padding: 120px 64px;
  background: var(--hg-orange);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}
.hg-cta-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 8rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--hg-white);
}
.hg-cta-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.hg-cta-p { font-size: 1rem; color: rgba(255,255,255,.78); line-height: 1.7; max-width: 320px; text-align: right; }

/* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
.hg-sr {
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.hg-sr.hg-in { opacity: 1; transform: translateY(0); }
.hg-sr-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.hg-sr-left.hg-in { opacity: 1; transform: translateX(0); }
.hg-sr-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.hg-sr-right.hg-in { opacity: 1; transform: translateX(0); }
.hg-d1 { transition-delay: .05s; }
.hg-d2 { transition-delay: .12s; }
.hg-d3 { transition-delay: .19s; }
.hg-d4 { transition-delay: .26s; }
.hg-d5 { transition-delay: .33s; }

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes hgSlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes hgFadeIn  { from{opacity:0} to{opacity:1} }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1100px) {
  .hg-container { padding: 0 30px; }
  .hg-hero { padding: 20px 30px 80px; }
  .hg-img-strip { width: 38%; }
  .hg-split { grid-template-columns: 1fr; gap: 40px; }
  .hg-sols-grid { grid-template-columns: repeat(2,1fr); }
  .hg-video-section { grid-template-columns: 1fr; padding: 80px 30px; }
  .hg-scroll-text-section { padding: 80px 30px; }
  .hg-cta-section { grid-template-columns: 1fr; padding: 80px 30px; }
  .hg-cta-right { align-items: flex-start; }
  .hg-cta-p { text-align: left; }
  .hg-mosaic { grid-template-columns: 1fr; }
  .hg-mosaic-main { height: 300px; }
  .hg-mosaic-side-col { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .hg-mosaic-side { height: 200px; }
  .hg-prod-grid { grid-template-columns: 1fr 1fr; }
  .hg-blog-grid { grid-template-columns: 1fr; }
  .hg-testi-track { padding: 0 30px 8px; }
  .hg-gallery-track { padding: 60px 30px 40px; }
  .hg-hero-topright { top: 80px; right: 30px; }
  .hg-outline { -webkit-text-stroke-width: 1.5px; }
}
@media(max-width:768px) {
  .hg-img-strip { display: none; }
  .hg-hero-ctas { flex-direction: column; align-items: flex-start; }
  .hg-sols-grid { grid-template-columns: 1fr; }
  .hg-prod-grid { grid-template-columns: 1fr; }
  .hg-stat-grid { grid-template-columns: 1fr; }
  .hg-big-title { -webkit-text-stroke-width: 1px; }
}



/* ============================================================
   Option 2: Large Image Cards — Our Top Solutions (Home)
   ============================================================ */
.hg-topsol2{
  padding: 56px 0;
  background: #f7f4f0;
}

.hg-topsol2__head{
  text-align: center;
  max-width: 880px;
  margin: 0 auto 22px;
}

.hg-topsol2__kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

.hg-topsol2__title{
  margin: 0;
  font-size: clamp(28px, 3.8vw, 54px);
  line-height: 1.05;
  letter-spacing: .02em;
}

.hg-topsol2__title span{ color: #ff5500; }

.hg-topsol2__sub{
  margin: 12px auto 0;
  max-width: 760px;
  color: rgba(0,0,0,.65);
  font-size: 16px;
}

.hg-topsol2__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.hg-topsol2__card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  display: block;
  text-decoration: none;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateZ(0);
}

.hg-topsol2__card:nth-child(1),
.hg-topsol2__card:nth-child(2){
  grid-column: span 6;
  min-height: 320px;
}

.hg-topsol2__card:nth-child(3),
.hg-topsol2__card:nth-child(4),
.hg-topsol2__card:nth-child(5){
  grid-column: span 4;
}

.hg-topsol2__card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .45s ease;
}

.hg-topsol2__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.84) 100%);
}

.hg-topsol2__content{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: #fff;
}

.hg-topsol2__content h3{
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: .01em;
}

.hg-topsol2__content p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.5;
  max-width: 52ch;
}

.hg-topsol2__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.hg-topsol2__card:hover img{ transform: scale(1.07); }
.hg-topsol2__card:hover{ box-shadow: 0 16px 44px rgba(0,0,0,.18); }

.hg-topsol2__cta{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.hg-topsol2__btn{
  background: #ff5500;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(255,85,0,.28);
}

.hg-topsol2__btn:hover{ filter: brightness(.95); }

@media (max-width: 992px){
  .hg-topsol2{ padding: 44px 0; }
  .hg-topsol2__card:nth-child(1),
  .hg-topsol2__card:nth-child(2){
    grid-column: span 12;
    min-height: 300px;
  }
  .hg-topsol2__card:nth-child(3),
  .hg-topsol2__card:nth-child(4),
  .hg-topsol2__card:nth-child(5){
    grid-column: span 12;
    min-height: 240px;
  }
}

.hg-video-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  position:relative;
}

.hg-video-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.hg-play-btn,
.hg-vp-text{
  position:relative;
  z-index:2;
}