/* Supporterg Honey Theme — structural redesign v2.8.16
   Dedicated Honey-only layer loaded after style.css. */

html[data-theme="honey"] {
  color-scheme: light;
  --h2-bg: #f8f0df;
  --h2-bg-soft: #fff9ee;
  --h2-cream: #fffaf0;
  --h2-paper: rgba(255, 252, 245, .92);
  --h2-paper-strong: rgba(255, 254, 250, .98);
  --h2-line: rgba(169, 106, 12, .16);
  --h2-line-strong: rgba(169, 106, 12, .28);
  --h2-text: #412608;
  --h2-text-soft: #705637;
  --h2-amber-1: #ffe89a;
  --h2-amber-2: #f7c74e;
  --h2-amber-3: #ed9f17;
  --h2-amber-4: #d77903;
  --h2-cocoa: #332008;
  --h2-cocoa-2: #52320d;
  --h2-green: #2d9a68;
  --h2-shadow-sm: 0 14px 32px rgba(109, 67, 7, .09), 0 4px 14px rgba(109, 67, 7, .04);
  --h2-shadow-md: 0 24px 52px rgba(109, 67, 7, .12), 0 10px 24px rgba(109, 67, 7, .06);
  --h2-shadow-lg: 0 42px 90px rgba(109, 67, 7, .16), 0 18px 42px rgba(109, 67, 7, .08);
  --h2-ease: cubic-bezier(.2,.72,.2,1);
}

html[data-theme="honey"] body {
  color: var(--h2-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,226,142,.26), transparent 21%),
    radial-gradient(circle at 86% 7%, rgba(241,172,31,.10), transparent 17%),
    linear-gradient(180deg, #fcf7ed 0%, #f6edda 100%);
}

html[data-theme="honey"] body::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(114,71,10,.014) 1px, transparent 1px),
    linear-gradient(rgba(114,71,10,.014) 1px, transparent 1px),
    radial-gradient(circle at 0 0, rgba(255,255,255,.34), transparent 18%);
  background-size: 32px 32px, 32px 32px, auto;
}

/* ---------- Header ---------- */
html[data-theme="honey"] .sg-header {
  background: linear-gradient(180deg, rgba(248,238,216,.91), rgba(247,237,216,.80));
  border-bottom: 1px solid rgba(169,106,12,.09);
  box-shadow: 0 12px 28px rgba(100,63,9,.07), inset 0 -1px 0 rgba(255,255,255,.58);
}

html[data-theme="honey"] .sg-nav {
  min-height: 72px;
  border-radius: 26px;
  border: 1px solid rgba(183,128,29,.18);
  background:
    linear-gradient(180deg, rgba(255,253,248,.96), rgba(251,242,221,.94)),
    radial-gradient(circle at 12% 0%, rgba(255,230,160,.16), transparent 18%);
  box-shadow: 0 22px 46px rgba(111,68,8,.11), inset 0 1px 0 rgba(255,255,255,.95);
  overflow: visible;
}

html[data-theme="honey"] .sg-nav::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 42%);
}

html[data-theme="honey"] .sg-nav::after {
  left: 7%;
  right: 7%;
  bottom: -18px;
  height: 40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(239,173,35,.13), transparent 70%);
  filter: blur(14px);
  opacity: .72;
}

html[data-theme="honey"] .sg-brand {
  position: relative;
  border-radius: 18px;
  padding: 3px 7px;
}

html[data-theme="honey"] .sg-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 44%, rgba(255,219,112,.14));
  pointer-events: none;
}

html[data-theme="honey"] .sg-brand-logo-full {
  filter: grayscale(1) sepia(1) saturate(8.5) hue-rotate(354deg) brightness(.93) contrast(1.04) drop-shadow(0 6px 10px rgba(166,94,3,.08));
  transition: transform .28s var(--h2-ease), filter .28s ease;
}

html[data-theme="honey"] .sg-brand:hover .sg-brand-logo-full {
  transform: translateY(-1px) scale(1.015);
  filter: grayscale(1) sepia(1) saturate(9) hue-rotate(354deg) brightness(.98) contrast(1.06) drop-shadow(0 9px 14px rgba(166,94,3,.12));
}

html[data-theme="honey"] .sg-menu a,
html[data-theme="honey"] .sg-global-link {
  color: #654820;
  font-weight: 700;
  letter-spacing: -.01em;
  border-radius: 10px;
  transition: transform .24s var(--h2-ease), color .24s ease, background .24s ease;
}

html[data-theme="honey"] .sg-menu a:hover,
html[data-theme="honey"] .sg-global-link:hover {
  color: #8d5507;
  background: rgba(236,174,42,.08);
  transform: translateY(-1px);
}

html[data-theme="honey"] .sg-theme-menu,
html[data-theme="honey"] .sg-lang-menu {
  border: 1px solid rgba(190,135,32,.17);
  background: linear-gradient(180deg, rgba(255,252,244,.99), rgba(251,240,216,.99));
  box-shadow: 0 26px 50px rgba(119,74,8,.16), inset 0 1px 0 rgba(255,255,255,.96);
}

html[data-theme="honey"] .sg-theme-menu button:hover,
html[data-theme="honey"] .sg-lang-menu a:hover {
  background: linear-gradient(180deg, rgba(255,244,208,.86), rgba(247,221,159,.72));
  color: #744608;
}

html[data-theme="honey"] .sg-control-btn,
html[data-theme="honey"] .sg-global-contact,
html[data-theme="honey"] .sg-btn-primary.sg-btn-small {
  border-radius: 16px !important;
  border-color: rgba(178,116,16,.18) !important;
  box-shadow: var(--h2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html[data-theme="honey"] .sg-control-btn {
  color: #5d421c !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,242,222,.96)) !important;
  transition: transform .24s var(--h2-ease), box-shadow .24s ease, background .24s ease;
}

html[data-theme="honey"] .sg-control-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html[data-theme="honey"] .sg-global-contact,
html[data-theme="honey"] .sg-btn-primary.sg-btn-small {
  color: #482705 !important;
  background: linear-gradient(180deg, #ffe997, #f7c54f 35%, #eca01b 68%, #d77a04) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .24s var(--h2-ease), box-shadow .24s ease, background .24s ease;
}

html[data-theme="honey"] .sg-global-contact::after,
html[data-theme="honey"] .sg-btn-primary.sg-btn-small::after {
  content: "";
  position: absolute;
  top: -55%;
  bottom: -55%;
  left: -38%;
  width: 24%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: 0;
}

html[data-theme="honey"] .sg-global-contact:hover,
html[data-theme="honey"] .sg-btn-primary.sg-btn-small:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffedae, #fad06b 35%, #f0aa28 68%, #df8307) !important;
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html[data-theme="honey"] .sg-global-contact:hover::after,
html[data-theme="honey"] .sg-btn-primary.sg-btn-small:hover::after {
  animation: h2Sweep .8s ease forwards;
}

/* ---------- New Honey homepage ---------- */
.sg-h2-home {
  position: relative;
  overflow: clip;
}

html[data-theme="honey"] .sg-h2-home {
  display: block;
}

.sg-h2-hero {
  position: relative;
  padding: 56px 0 34px;
}

.sg-h2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 10%, rgba(255,223,130,.27), transparent 21%),
    radial-gradient(circle at 78% 20%, rgba(236,168,33,.10), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%);
}

.sg-h2-shell {
  position: relative;
  z-index: 2;
}

.sg-h2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(500px, 1.02fr);
  gap: 64px;
  align-items: center;
}

.sg-h2-copy {
  position: relative;
  padding-left: 10px;
  animation: h2FadeUp .8s var(--h2-ease) both;
}

.sg-h2-kicker,
.sg-h2-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(178,116,16,.15);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(252,244,226,.84));
  box-shadow: 0 10px 20px rgba(120,76,9,.06), inset 0 1px 0 rgba(255,255,255,.92);
  color: #986111;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sg-h2-kicker i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: rotate(30deg);
  background: linear-gradient(145deg, #ffd95d, #e8980c);
  box-shadow: 0 0 0 4px rgba(240,173,35,.08);
}

.sg-h2-copy h1 {
  max-width: 8.7ch;
  margin: 22px 0 0;
  color: var(--h2-text);
  font-size: clamp(60px, 6.3vw, 92px);
  line-height: .91;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.sg-h2-copy h1 em {
  color: transparent;
  background: linear-gradient(180deg, #ffc93c 0%, #eea01a 44%, #d67603 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
  filter: drop-shadow(0 7px 13px rgba(208,121,3,.13));
}

.sg-h2-liquid-word {
  position: relative;
  width: min(540px, 82%);
  height: 26px;
  margin-top: -4px;
  pointer-events: none;
}

.sg-h2-liquid-word > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0ae, #f5ba34 44%, #d87c03 100%);
  box-shadow: 0 5px 12px rgba(194,109,0,.15), inset 0 1px 0 rgba(255,255,255,.72);
}

.sg-h2-liquid-word > span::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 20%;
  top: 1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  animation: h2LiquidShine 6.2s ease-in-out infinite;
}

.sg-h2-liquid-word i {
  position: absolute;
  top: 4px;
  width: 12px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(180deg, #f6ba35, #d87b03);
  transform-origin: 50% 0;
  box-shadow: 0 5px 9px rgba(170,91,0,.13), inset 0 1px 0 rgba(255,239,182,.55);
  animation: h2LiquidDrip 6.8s var(--h2-ease) infinite;
}

.sg-h2-liquid-word i:nth-of-type(1){left:14%;height:13px;animation-delay:-.8s}
.sg-h2-liquid-word i:nth-of-type(2){left:35%;height:20px;animation-delay:-2.5s}
.sg-h2-liquid-word i:nth-of-type(3){left:68%;height:15px;animation-delay:-4.1s}
.sg-h2-liquid-word i:nth-of-type(4){left:88%;height:22px;animation-delay:-1.6s}

.sg-h2-copy > p {
  max-width: 650px;
  margin: 15px 0 0;
  color: #745e41;
  font-size: 17px;
  line-height: 1.67;
}

.sg-h2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.sg-h2-btn {
  position: relative;
  min-height: 58px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(169,106,12,.16);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  color: #4b2d0d;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--h2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.94);
  transition: transform .26s var(--h2-ease), box-shadow .26s ease, border-color .26s ease, background .26s ease;
}

.sg-h2-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.36), transparent 44%);
}

.sg-h2-btn::after {
  content: "";
  position: absolute;
  top: -55%;
  bottom: -55%;
  left: -38%;
  width: 24%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.76), transparent);
  opacity: 0;
}

.sg-h2-btn b {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 17px;
  transition: transform .26s var(--h2-ease), background .26s ease;
}

.sg-h2-btn-primary {
  background: linear-gradient(180deg, #ffe997, #f7c74f 35%, #ed9f18 68%, #d77a04);
}

.sg-h2-btn-primary b {
  background: rgba(255,251,236,.38);
  border: 1px solid rgba(126,68,0,.10);
}

.sg-h2-btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,243,224,.96));
}

.sg-h2-btn-secondary b {
  background: rgba(239,174,36,.10);
  color: #965c0b;
}

.sg-h2-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(169,106,12,.27);
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98);
}

.sg-h2-btn:hover::after { animation: h2Sweep .8s ease forwards; }
.sg-h2-btn:hover b { transform: translateX(4px) scale(1.05); }
.sg-h2-btn:active { transform: translateY(-1px) scale(.988); }

/* ---------- Hero image ---------- */
.sg-h2-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: h2FadeUp .9s .08s var(--h2-ease) both;
}

.sg-h2-image-card {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  border: 1px solid rgba(179,115,16,.24);
  border-radius: 38px 38px 30px 30px;
  background: #e4b657;
  box-shadow: var(--h2-shadow-lg), inset 0 1px 0 rgba(255,255,255,.88);
}

.sg-h2-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,250,231,.10), transparent 27%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 20%, transparent 80%, rgba(74,37,0,.07));
}

.sg-h2-image-card > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform .8s var(--h2-ease), filter .8s ease;
}

.sg-h2-image-card:hover > img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

.sg-h2-honey-cap {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: 92px;
  overflow: visible;
  filter: drop-shadow(0 9px 10px rgba(161,87,0,.15));
  pointer-events: none;
}

.sg-h2-cap-main { transform-origin: 50% 0; }
.sg-h2-cap-drip { transform-origin: 50% 0; }
.sg-h2-d1 { animation: h2CapDrip 7.8s ease-in-out infinite; }
.sg-h2-d2 { animation: h2CapDrip 8.9s -2.4s ease-in-out infinite; }
.sg-h2-d3 { animation: h2CapDrip 8.2s -4.1s ease-in-out infinite; }
.sg-h2-d4 { animation: h2CapDrip 9.2s -1.2s ease-in-out infinite; }

.sg-h2-image-glass {
  position: absolute;
  z-index: 5;
  left: 22px;
  bottom: 22px;
  min-width: 180px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(63,32,3,.36), rgba(63,32,3,.18));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(66,33,2,.12);
  color: #fff9ea;
}

.sg-h2-image-glass span,
.sg-h2-image-glass small { display: block; }
.sg-h2-image-glass span { font-size: 15px; font-weight: 900; letter-spacing: .02em; }
.sg-h2-image-glass small { margin-top: 3px; color: rgba(255,249,234,.70); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }

.sg-h2-bee {
  position: absolute;
  z-index: 7;
  left: -58px;
  top: 26px;
  width: 110px;
  filter: drop-shadow(0 14px 18px rgba(86,49,2,.18));
}

.sg-h2-bee svg { width: 100%; height: auto; overflow: visible; }
.sg-h2-bee-body { transform-origin: 58% 58%; animation: h2BeeFloat 6.8s ease-in-out infinite; }
.sg-h2-bee-trail { animation: h2Trail 8s linear infinite; opacity: .44; }
.sg-h2-wing { transform-origin: 50% 80%; }
.sg-h2-wing-a { animation: h2WingA .18s ease-in-out infinite alternate; }
.sg-h2-wing-b { animation: h2WingB .18s ease-in-out infinite alternate; }

.sg-h2-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(219,153,27,.12);
  border-radius: 50%;
  pointer-events: none;
}

.sg-h2-orbit-a { width: 520px; height: 520px; right: -84px; top: 2px; }
.sg-h2-orbit-b { width: 380px; height: 380px; right: -14px; top: 72px; border-style: dashed; opacity: .66; }

/* ---------- Service cards ---------- */
.sg-h2-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  margin-top: 8px;
}

.sg-h2-service {
  position: relative;
  min-height: 190px;
  padding: 28px 72px 26px 26px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 62px 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px 17px;
  border: 1px solid rgba(171,109,14,.15);
  border-radius: 30px;
  color: var(--h2-text);
  text-decoration: none;
  background:
    radial-gradient(circle at 0 0, rgba(255,239,195,.56), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.91), rgba(252,243,223,.97));
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98);
  transition: transform .30s var(--h2-ease), box-shadow .30s ease, border-color .30s ease;
  animation: h2FadeUp .8s var(--h2-ease) both;
}

.sg-h2-service:nth-child(2){animation-delay:.06s}.sg-h2-service:nth-child(3){animation-delay:.12s}

.sg-h2-service::before {
  content: "";
  position: absolute;
  inset: auto -24px -35px auto;
  width: 170px;
  height: 150px;
  opacity: .34;
  background:
    linear-gradient(30deg, rgba(214,147,27,.18) 12%, transparent 12.5%, transparent 87%, rgba(214,147,27,.18) 87.5%),
    linear-gradient(150deg, rgba(214,147,27,.18) 12%, transparent 12.5%, transparent 87%, rgba(214,147,27,.18) 87.5%);
  background-size: 32px 56px;
  transform: rotate(-4deg);
  pointer-events: none;
}

.sg-h2-service::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 4px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, transparent, rgba(238,170,29,.95) 24%, rgba(214,122,4,.95) 76%, transparent);
  opacity: .84;
}

.sg-h2-service:hover {
  transform: translateY(-8px);
  border-color: rgba(171,109,14,.27);
  box-shadow: 0 34px 62px rgba(109,67,7,.15), 0 13px 26px rgba(109,67,7,.07), inset 0 1px 0 rgba(255,255,255,.99);
}

.sg-h2-service-index {
  position: absolute;
  right: 24px;
  top: 20px;
  color: rgba(92,56,8,.22);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .03em;
}

.sg-h2-service-icon {
  grid-row: 1 / span 2;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(172,109,12,.14);
  border-radius: 19px;
  color: #a96106;
  background: linear-gradient(180deg, rgba(255,253,246,.98), rgba(248,225,170,.94));
  box-shadow: 0 14px 28px rgba(122,75,8,.09), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .28s var(--h2-ease), box-shadow .28s ease;
}

.sg-h2-service-icon svg { width: 30px; height: 30px; }
.sg-h2-code { font-size: 23px; font-weight: 900; letter-spacing: -.06em; }

.sg-h2-service:hover .sg-h2-service-icon {
  transform: translateY(-3px) rotate(-1deg) scale(1.04);
  box-shadow: 0 20px 34px rgba(122,75,8,.13), inset 0 1px 0 rgba(255,255,255,.98);
}

.sg-h2-service-copy { align-self: center; min-width: 0; }
.sg-h2-service-copy small,
.sg-h2-service-copy strong,
.sg-h2-service-copy > span { display: block; }
.sg-h2-service-copy small { color: #bb7410; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.sg-h2-service-copy strong { margin-top: 9px; color: #3f270c; font-size: 22px; line-height: 1.04; letter-spacing: -.035em; transition: color .28s ease; }
.sg-h2-service-copy > span { margin-top: 8px; color: #786147; font-size: 12px; line-height: 1.45; }
.sg-h2-service:hover .sg-h2-service-copy strong { color: #744606; }

.sg-h2-service-arrow {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(172,109,12,.14);
  border-radius: 15px;
  color: #8f5709;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,238,211,.96));
  box-shadow: 0 10px 22px rgba(122,75,8,.08), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .28s var(--h2-ease), box-shadow .28s ease, background .28s ease;
}

.sg-h2-service:hover .sg-h2-service-arrow {
  transform: translateX(4px) translateY(-2px);
  background: linear-gradient(180deg, #fffdf7, #f8e6be);
  box-shadow: 0 16px 28px rgba(122,75,8,.12), inset 0 1px 0 rgba(255,255,255,.98);
}

/* ---------- Story section ---------- */
.sg-h2-story {
  position: relative;
  padding: 86px 0 78px;
}

.sg-h2-story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 26%, rgba(255,222,127,.14), transparent 18%),
    radial-gradient(circle at 88% 72%, rgba(235,168,33,.08), transparent 18%);
}

.sg-h2-story-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px,.9fr) minmax(0,1.1fr);
  gap: 74px;
  align-items: center;
}

.sg-h2-story-media {
  position: relative;
  min-height: 490px;
}

.sg-h2-jar-card {
  position: absolute;
  inset: 0 18px 0 0;
  overflow: hidden;
  border: 1px solid rgba(172,109,12,.17);
  border-radius: 36px;
  background: #f5d99e;
  box-shadow: var(--h2-shadow-lg), inset 0 1px 0 rgba(255,255,255,.88);
}

.sg-h2-jar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 24%, rgba(93,50,0,.05));
}

.sg-h2-jar-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform .8s var(--h2-ease), filter .8s ease;
}

.sg-h2-jar-card:hover img { transform: scale(1.045); filter: saturate(1.04); }

.sg-h2-jar-glow {
  position: absolute;
  inset: auto 10% -44px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(239,174,41,.30), transparent 70%);
  filter: blur(18px);
}

.sg-h2-story-chip {
  position: absolute;
  right: -6px;
  bottom: 30px;
  min-width: 188px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(172,109,12,.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,239,212,.94));
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sg-h2-story-chip b { color: #d98005; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.sg-h2-story-chip small { color: #755b3a; font-size: 11px; font-weight: 800; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }

.sg-h2-story-copy h2 {
  max-width: 780px;
  margin: 18px 0 0;
  color: #43280a;
  font-size: clamp(46px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.05em;
}

.sg-h2-story-copy h2 em { color: #d87d04; font-style: normal; }
.sg-h2-story-copy > p { max-width: 700px; margin: 22px 0 0; color: #745d3e; font-size: 16px; line-height: 1.72; }

.sg-h2-benefits {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 28px;
}

.sg-h2-benefits > div {
  min-height: 98px;
  padding: 16px 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(171,109,14,.13);
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(252,244,227,.84));
  box-shadow: 0 12px 28px rgba(109,67,7,.06), inset 0 1px 0 rgba(255,255,255,.88);
  transition: transform .26s var(--h2-ease), box-shadow .26s ease, border-color .26s ease;
}

.sg-h2-benefits > div:hover {
  transform: translateY(-4px);
  border-color: rgba(171,109,14,.22);
  box-shadow: var(--h2-shadow-sm), inset 0 1px 0 rgba(255,255,255,.94);
}

.sg-h2-benefits i {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(171,109,14,.13);
  border-radius: 14px;
  color: #a86206;
  background: linear-gradient(180deg, rgba(255,253,247,.96), rgba(248,226,173,.92));
  font-style: normal;
}

.sg-h2-benefits i svg { width: 23px; height: 23px; }
.sg-h2-benefits strong,
.sg-h2-benefits small { display: block; }
.sg-h2-benefits strong { color: #4c2e0d; font-size: 14px; line-height: 1.2; }
.sg-h2-benefits small { margin-top: 4px; color: #806b50; font-size: 11px; line-height: 1.35; }

.sg-h2-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  color: #8f5709;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.sg-h2-text-link b { transition: transform .24s var(--h2-ease); }
.sg-h2-text-link:hover b { transform: translateX(5px); }

/* ---------- Process ---------- */
.sg-h2-process {
  position: relative;
  padding: 72px 0 82px;
}

.sg-h2-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
}

.sg-h2-section-head {
  max-width: 880px;
  margin: 0 auto 38px;
  text-align: center;
}

.sg-h2-section-head h2 {
  margin: 16px 0 0;
  color: #43280a;
  font-size: clamp(42px, 4.8vw, 66px);
  line-height: .98;
  letter-spacing: -.05em;
}

.sg-h2-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}

.sg-h2-process-grid::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 43px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(235,165,27,.10), rgba(235,165,27,.72), rgba(235,165,27,.10));
  box-shadow: 0 4px 14px rgba(207,121,3,.10);
}

.sg-h2-process-grid article {
  position: relative;
  min-height: 252px;
  padding: 70px 25px 26px;
  overflow: hidden;
  border: 1px solid rgba(171,109,14,.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,235,184,.36), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(251,241,217,.96));
  box-shadow: var(--h2-shadow-md), inset 0 1px 0 rgba(255,255,255,.98);
  transition: transform .30s var(--h2-ease), box-shadow .30s ease, border-color .30s ease;
}

.sg-h2-process-grid article:hover {
  transform: translateY(-7px);
  border-color: rgba(171,109,14,.26);
  box-shadow: 0 34px 58px rgba(109,67,7,.14), inset 0 1px 0 rgba(255,255,255,.99);
}

.sg-h2-step-num {
  position: absolute;
  left: 24px;
  top: 20px;
  color: rgba(92,56,8,.22);
  font-size: 22px;
  font-weight: 900;
}

.sg-h2-step-dot {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 5px solid #fff8e9;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd85c, #e9950c);
  box-shadow: 0 0 0 1px rgba(187,120,11,.18), 0 7px 15px rgba(182,111,2,.16);
}

.sg-h2-process-grid article h3 { margin: 0; color: #482b0b; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.sg-h2-process-grid article p { margin: 13px 0 0; color: #796348; font-size: 13px; line-height: 1.58; }

/* ---------- Contact ---------- */
.sg-h2-contact {
  padding: 0 0 86px;
}

.sg-h2-contact-panel {
  position: relative;
  min-height: 290px;
  padding: 46px 52px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 46px;
  align-items: center;
  border: 1px solid rgba(255,213,103,.20);
  border-radius: 34px;
  color: #fff8ea;
  background:
    radial-gradient(circle at 82% 0, rgba(255,194,63,.18), transparent 26%),
    linear-gradient(135deg, #4a2b08 0%, #321d07 52%, #251506 100%);
  box-shadow: 0 38px 78px rgba(75,42,3,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

.sg-h2-contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, rgba(255,217,117,.05) 12%, transparent 12.5%, transparent 87%, rgba(255,217,117,.05) 87.5%),
    linear-gradient(150deg, rgba(255,217,117,.05) 12%, transparent 12.5%, transparent 87%, rgba(255,217,117,.05) 87.5%);
  background-size: 38px 66px;
  pointer-events: none;
}

.sg-h2-contact-copy { position: relative; z-index: 2; }
.sg-h2-contact-copy .sg-h2-label { color: #f0b53d; background: rgba(255,249,232,.08); border-color: rgba(255,225,151,.14); box-shadow: none; }
.sg-h2-contact-copy h2 { max-width: 760px; margin: 16px 0 0; color: #fff9ec; font-size: clamp(42px, 4.8vw, 68px); line-height: .96; letter-spacing: -.05em; }
.sg-h2-contact-copy p { margin: 15px 0 0; color: rgba(255,246,226,.68); font-size: 15px; }

.sg-h2-contact-actions {
  position: relative;
  z-index: 2;
  min-width: 310px;
  display: grid;
  gap: 12px;
}

.sg-h2-contact-actions .sg-h2-btn { width: 100%; min-width: 300px; }
.sg-h2-contact-actions .sg-h2-btn-secondary { color: #f7e8c7; background: rgba(255,255,255,.07); border-color: rgba(255,225,151,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.12); }
.sg-h2-contact-actions .sg-h2-btn-secondary b { color: #efb33c; background: rgba(255,255,255,.05); }
.sg-h2-contact-actions .sg-h2-btn-secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,225,151,.24); }

.sg-h2-contact-orb {
  position: absolute;
  right: -100px;
  bottom: -150px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,214,110,.09);
  box-shadow: 0 0 0 34px rgba(255,214,110,.03), 0 0 0 72px rgba(255,214,110,.018);
}

/* ---------- Motion ---------- */
@keyframes h2FadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes h2Sweep { 0%{left:-38%;opacity:0} 12%{opacity:.95} 100%{left:118%;opacity:0} }
@keyframes h2LiquidShine { 0%,100%{transform:translateX(-7%);opacity:.7} 50%{transform:translateX(10%);opacity:1} }
@keyframes h2LiquidDrip { 0%,100%{transform:scaleY(1) translateY(0)} 35%{transform:scaleY(1.16) translateY(1px)} 56%{transform:scaleY(1.28) translateY(3px)} 74%{transform:scaleY(1.08) translateY(1px)} }
@keyframes h2CapDrip { 0%,100%{transform:scaleY(1) translateY(0)} 36%{transform:scaleY(1.07) translateY(.5px)} 56%{transform:scaleY(1.17) translateY(2px)} 75%{transform:scaleY(1.05) translateY(.5px)} }
@keyframes h2BeeFloat { 0%,100%{transform:translate3d(0,0,0) rotate(-5deg)} 24%{transform:translate3d(7px,-6px,0) rotate(2deg)} 52%{transform:translate3d(-3px,5px,0) rotate(-7deg)} 78%{transform:translate3d(5px,1px,0) rotate(1deg)} }
@keyframes h2Trail { to{stroke-dashoffset:-42} }
@keyframes h2WingA { from{transform:rotate(-13deg) scaleY(.98)} to{transform:rotate(15deg) scaleY(.82)} }
@keyframes h2WingB { from{transform:rotate(13deg) scaleY(.98)} to{transform:rotate(-15deg) scaleY(.82)} }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sg-h2-hero-grid { grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr); gap: 40px; }
  .sg-h2-copy h1 { font-size: clamp(56px, 6vw, 78px); }
  .sg-h2-story-grid { gap: 48px; grid-template-columns: minmax(360px,.92fr) minmax(0,1.08fr); }
}

@media (max-width: 980px) {
  .sg-h2-hero { padding-top: 40px; }
  .sg-h2-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .sg-h2-copy { max-width: 760px; padding-left: 0; }
  .sg-h2-copy h1 { max-width: 9ch; }
  .sg-h2-liquid-word { width: min(520px,82%); }
  .sg-h2-visual { min-height: 0; padding: 0 34px; }
  .sg-h2-image-card { width: 100%; max-width: 720px; }
  .sg-h2-bee { left: -38px; width: 92px; }
  .sg-h2-orbit-a { width: 460px; height: 460px; }
  .sg-h2-orbit-b { width: 330px; height: 330px; }
  .sg-h2-services { grid-template-columns: 1fr; gap: 14px; }
  .sg-h2-service { min-height: 150px; grid-template-columns: 58px 1fr; }
  .sg-h2-story-grid { grid-template-columns: 1fr; gap: 38px; }
  .sg-h2-story-media { min-height: 480px; max-width: 700px; width: 100%; margin-inline: auto; }
  .sg-h2-story-copy { max-width: 760px; }
  .sg-h2-process-grid { gap: 14px; }
  .sg-h2-contact-panel { grid-template-columns: 1fr; gap: 28px; }
  .sg-h2-contact-actions { min-width: 0; max-width: 520px; }
  .sg-h2-contact-actions .sg-h2-btn { min-width: 0; }
}

@media (max-width: 767px) {
  .sg-h2-hero { padding: 26px 0 22px; }
  .sg-h2-copy h1 { font-size: clamp(44px, 12vw, 58px); line-height: .94; }
  .sg-h2-liquid-word { display: none; }
  .sg-h2-copy > p { margin-top: 18px; font-size: 15px; line-height: 1.6; }
  .sg-h2-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .sg-h2-btn { width: 100%; min-height: 54px; }
  .sg-h2-visual { padding: 0; }
  .sg-h2-image-card { border-radius: 28px 28px 23px 23px; aspect-ratio: 1.16 / 1; }
  .sg-h2-image-card > img { object-position: 62% center; }
  .sg-h2-honey-cap { height: 68px; }
  .sg-h2-image-glass { left: 14px; bottom: 14px; min-width: 155px; padding: 10px 12px; border-radius: 14px; }
  .sg-h2-bee { left: auto; right: -6px; top: 10px; width: 72px; }
  .sg-h2-orbit { display: none; }
  .sg-h2-services { margin-top: 18px; }
  .sg-h2-service { min-height: 134px; padding: 22px 60px 20px 20px; grid-template-columns: 50px 1fr; border-radius: 24px; gap: 12px; }
  .sg-h2-service-icon { width: 50px; height: 50px; border-radius: 15px; }
  .sg-h2-service-copy small { font-size: 8px; }
  .sg-h2-service-copy strong { font-size: 18px; }
  .sg-h2-service-copy > span { font-size: 11px; }
  .sg-h2-service-index { right: 18px; top: 16px; font-size: 15px; }
  .sg-h2-service-arrow { right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 13px; }
  .sg-h2-story { padding: 62px 0 58px; }
  .sg-h2-story-media { min-height: 360px; }
  .sg-h2-jar-card { inset: 0; border-radius: 28px; }
  .sg-h2-story-chip { right: 14px; bottom: 14px; min-width: 162px; padding: 12px 14px; border-radius: 16px; }
  .sg-h2-story-chip b { font-size: 28px; }
  .sg-h2-story-copy h2 { font-size: clamp(40px, 11vw, 54px); }
  .sg-h2-story-copy > p { font-size: 15px; }
  .sg-h2-benefits { grid-template-columns: 1fr; gap: 10px; }
  .sg-h2-benefits > div { min-height: 84px; }
  .sg-h2-process { padding: 58px 0 66px; }
  .sg-h2-section-head { text-align: left; margin-bottom: 28px; }
  .sg-h2-section-head h2 { font-size: clamp(38px, 10vw, 50px); }
  .sg-h2-process-grid { grid-template-columns: 1fr; gap: 12px; }
  .sg-h2-process-grid::before { display: none; }
  .sg-h2-process-grid article { min-height: 0; padding: 58px 20px 22px; border-radius: 24px; }
  .sg-h2-step-dot { left: auto; right: 22px; margin: 0; }
  .sg-h2-contact { padding-bottom: 58px; }
  .sg-h2-contact-panel { min-height: 0; padding: 30px 20px; border-radius: 28px; }
  .sg-h2-contact-copy h2 { font-size: clamp(38px, 10vw, 52px); }
  .sg-h2-contact-actions { width: 100%; }
  .sg-h2-contact-actions .sg-h2-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-h2-copy,
  .sg-h2-visual,
  .sg-h2-service,
  .sg-h2-liquid-word > span::after,
  .sg-h2-liquid-word i,
  .sg-h2-cap-drip,
  .sg-h2-bee-body,
  .sg-h2-bee-trail,
  .sg-h2-wing,
  .sg-h2-global-contact::after,
  .sg-h2-btn::after {
    animation: none !important;
  }
}