:root {
  --cream: #fff8ea;
  --paper: #fff2d7;
  --paper-deep: #f6dfb8;
  --red: #c8101c;
  --green: #086a32;
  --gold: #c7790a;
  --gold-soft: #f3bd61;
  --ink: #171b21;
  --muted: #4f4238;
  --line: rgba(189, 119, 28, 0.25);
  --shadow: 0 18px 45px rgba(98, 55, 12, 0.16);
  --radius: 28px;
  --content-width: 1560px;
}

/* ==========================================
   THE MODERN CSS3 RESET 
   ========================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
a {
  text-decoration: none;
  color: inherit;
}
ul, ol {
  list-style: none;
}
#root, #__next {
  isolation: isolate;
}



html { scroll-behavior: smooth; }

body {
  margin: 0;
/*  min-width: 320px;*/
  color: var(--ink);
  font-family: "Montserrat", sans-serif;
  background:
    radial-gradient(circle at 72% 8%, rgba(255, 200, 70, 0.24), transparent 30rem),
    radial-gradient(circle at 8% 0%, rgba(255,255,255,0.8), transparent 18rem),
    linear-gradient(135deg, #fffdf7 0%, var(--cream) 45%, #fff4df 100%);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.vfok-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 42px 0px 0px 42px;
}

.vfok-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(141, 95, 28, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 95, 28, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 82%);
}

.hero {
  width: min(100%, var(--content-width));
  min-height: calc(100vh - clamp(36px, 6vw, 84px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(430px, 0.9fr) minmax(540px, 1.1fr);
  grid-template-areas:
    "copy art"
    "steps art"
    "action art"
    "trust art";
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
}

.copy-panel { grid-area: copy; position: relative; z-index: 4; }

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(28px, 4vh, 52px);
}
.brand img{width: 400px;}

.brand-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(3.1rem, 6vw, 5.65rem);
  line-height: 0.82;
  letter-spacing: 0.075em;
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.brand-line {
  font-size: clamp(0.72rem, 1.05vw, 1.03rem);
  font-weight: 900;
  letter-spacing: 0.245em;
  text-transform: uppercase;
  color: #111820;
}

.kicker {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: clamp(2.05rem, 3.2vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h1 {
  margin: 0;
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: clamp(4.2rem, 7.1vw, 8.5rem);
  line-height: 0.87;
  color: var(--red);
}

h1 span, h1 strong { display: block; }
h1 strong { color: var(--green); font-style: normal; }

.gold-rule {
  display: block;
  width: min(320px, 50vw);
  height: 2px;
  margin: clamp(14px, 1.9vw, 24px) 0 clamp(14px, 2vw, 26px);
  background:
    linear-gradient(90deg, transparent 0 4%, var(--gold) 4% 46%, transparent 46% 54%, var(--gold) 54% 96%, transparent 96% 100%);
  position: relative;
}
.gold-rule::before, .gold-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
  background: var(--cream);
}
.gold-rule::before { left: 0; }
.gold-rule::after { left: 50%; margin-left: -4px; }

.lead {
  width: min(100%, 630px);
  margin: 0;
  font-size: clamp(1.23rem, 2vw, 2.05rem);
  line-height: 1.38;
  letter-spacing: -0.03em;
}

.art-stage {
  grid-area: art;
  position: relative;
  min-height: min(820px, calc(100vh - 54px));
  height: 100%;
  overflow: hidden;
  align-self: stretch;
  border-radius: 38px;
}

.sun-disc {
  position: absolute;
  z-index: 0;
  top: 1%;
  right: 13%;
  width: min(60%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.7) 0 3px, transparent 4px 100%),
    radial-gradient(circle at 35% 30%, #ffc239 0%, #f8a50d 64%, rgba(248,165,13,.78) 100%);
  box-shadow: inset 0 0 40px rgba(255,255,255,.25), 0 24px 55px rgba(209,126,0,.18);
}

.asset { position: absolute; user-select: none; pointer-events: none; }
.bridge {
    z-index: 1;
    left: 0%;
    top: 26%;
    width: 100%;
    opacity: .8;
    filter: sepia(0.25) contrast(0.94);
}
.memorial {
    z-index: 1;
    right: -45%;
    top: 10%;
    width: 100%;
    opacity: 0.78;
    filter: sepia(0.18) contrast(0.94);
}
.headline-block {
    width: 743px;
}
.model {
  z-index: 5;
  right: 18%;
  top: 5%;
  width: 60%;
  filter: drop-shadow(0 18px 30px rgba(91, 43, 12, 0.18));
  mix-blend-mode: normal;
}
.taxi {
    z-index: 4;
    right: -25%;
    bottom: 23%;
    width: 68%;
    filter: drop-shadow(0 14px 18px rgba(80, 45, 12, 0.18));
}

.product-cluster {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 0;
  width: 100%;
  height: 52%;
}
.product,
.ingredient { position: absolute; bottom: 0; object-fit: contain; }
.product {
  z-index: 4;
  width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 20px 20px rgba(75, 43, 7, 0.18));
  mix-blend-mode: normal;
}
.product-turmeric { left: 17%; }
.product-aloe { left: 53%; }
.ingredient-turmeric {
  z-index: 2;
  left: -2%;
  bottom: -2%;
  width: 42%;
  filter: drop-shadow(0 12px 12px rgba(91, 48, 8, 0.12));
}
.ingredient-aloe {
  z-index: 3;
  right: -1%;
  bottom: -1%;
  width: 38%;
  filter: drop-shadow(0 12px 12px rgba(36, 92, 18, 0.14));
}

.bird {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 18px;
  pointer-events: none;
  opacity: 0.76;
  transform: rotate(-10deg);
}
.bird::before, .bird::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 24px;
  height: 10px;
  border-top: 4px solid #29251f;
  border-radius: 50% 50% 0 0;
}
.bird::before { left: 0; transform: rotate(14deg); }
.bird::after { right: 0; transform: rotate(-14deg); }
.bird-a { top: 4%; left: 25%; transform: scale(1.15) rotate(-8deg); }
.bird-b { top: 16%; left: 17%; transform: scale(.85) rotate(8deg); opacity:.6; }
.bird-c { top: 27%; left: 20%; transform: scale(.65) rotate(-4deg); opacity:.52; }

.steps {
  grid-area: steps;
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
}

.step-card {
  /* display: grid; */
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 158px;
  padding: clamp(16px, 1.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 249, 238, 0.76);
  box-shadow: 0 14px 30px rgba(99, 55, 10, 0.07);
  backdrop-filter: blur(8px);
  width: 260px;
}
.step-card img {
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.step-card h2 {
  margin: 0 0 9px;
  font-family: "Lora", serif;
  font-size: clamp(1.05rem, 1.28vw, 1.4rem);
  line-height: 1.05;
  color: #23150c;
  position: relative;
}
.step-card h2:before{
  display: block;
  position: absolute;
  left: 0px;
  bottom: -5px;
  width: 60px;
  height: 2px;
  content: '';
  background: #c7790a;
}
.step-card p {
  margin: 0;
  font-size: clamp(0.88rem, .95vw, 1.02rem);
  line-height: 1.35;
  color: #4b3d34;
}
.chev { display: none; }

.action-panel {
  grid-area: action;
  position: relative;
  z-index: 7;
  width: min(100%, 650px);
  display: grid;
  gap: 12px;
}

.countdown-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.7vw, 24px);
  padding: 13px 26px;
  min-height: 88px;
  border: 1.5px solid rgba(202, 128, 25, 0.48);
  border-radius: 24px;
  background: rgba(255, 249, 239, 0.82);
  box-shadow: 0 12px 26px rgba(92, 50, 12, 0.06);
  backdrop-filter: blur(10px);
}
.clock {
  width: clamp(50px, 4.8vw, 68px);
  color: #bf7508;
}
.clock svg {
  width: 100%;
  fill: #bf7508;
  stroke: #bf7508;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.5;
}
.count-label {
  font-size: clamp(1.08rem, 1.75vw, 1.7rem);
  line-height: 1.16;
  color: #3e2518;
}
.seconds {
  min-width: 142px;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgba(193, 117, 12, 0.56);
  text-align: center;
  color: var(--red);
}
.seconds b {
  display: block;
  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: .86;
  letter-spacing: .04em;
}
.seconds small {
  display: block;
  margin-top: 5px;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1;
  font-weight: 900;
}

.whatsapp-btn {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 14px 28px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(90deg, #0b8c39 0%, #06a63e 48%, #006d2e 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 24px rgba(0, 104, 43, .27), inset 0 -4px 0 rgba(0,0,0,.14);
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease;
}
.whatsapp-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.whatsapp-btn:active { transform: translateY(1px) scale(.998); }
.whatsapp-btn svg {
  width: clamp(42px, 5vw, 58px);
  fill: currentColor;
}
.whatsapp-btn b {
  display: block;
  font-size: clamp(1.65rem, 2.75vw, 2.7rem);
  line-height: .95;
  letter-spacing: .035em;
}
.whatsapp-btn small {
  display: block;
  margin-top: 4px;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1;
  font-weight: 500;
  text-transform: none;
}
.later-btn {
  width: min(82%, 520px);
  justify-self: center;
  min-height: 56px;
  border: 2px solid #0b7e3d;
  border-radius: 999px;
  background: rgba(255, 249, 238, .72);
  color: #087139;
  font: inherit;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.later-btn:hover { background: #087139; color: #fff; }
.later-btn:active { transform: translateY(1px); }

.trust-strip {
  grid-area: trust;
  position: relative;
  z-index: 5;
  width: min(100%, 520px);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 10px 20px;
  color: #2d2824;
  background: rgba(255, 248, 237, 0.72);
  border: 1px solid rgba(204, 132, 32, .22);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(80, 43, 8, .05);
  font-size: clamp(.92rem, 1.15vw, 1.08rem);
  margin-bottom: 42px;
}
.trust-strip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.shield { color: #d28914; font-weight: 900; font-size: 1.4em; line-height: .7; }

@media (max-width: 1240px) {
  .hero {
    grid-template-columns: minmax(380px, 0.92fr) minmax(490px, 1.08fr);
    column-gap: 24px;
  }
  .step-card { grid-template-columns: 62px 1fr; min-height: 140px; gap: 12px; }
  .step-card img { width: 60px; }
  .product-cluster { width: 54%; }
  .memorial { right: -7%; width: 46%; }
}

@media (max-width: 980px) {
  .vfok-page { padding: 0; }
  .hero {
    min-height: 100vh;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "art"
      "steps"
      "action"
      "trust";
    row-gap: 0;
    padding: clamp(22px, 5vw, 56px) clamp(18px, 5vw, 68px) 28px;
  }

  .brand { margin-bottom: clamp(30px, 5.8vw, 52px); }
  .brand-mark {font-size: clamp(2.9rem, 13.5vw, 2.25rem);}
  .brand-line {font-size: 12px; letter-spacing: .22em; }
  .kicker {font-size: 40px;font-weight: 700; }
  h1 { font-size: clamp(4.4rem, 13.4vw, 7.3rem); max-width: 8ch; }
  .lead {font-size: 27px;max-width: 400px; }
  .gold-rule {width: 200px;margin-top: 25px;margin-bottom: 25px;}

  .art-stage {width: 100%;
        justify-self: center;
        min-height: clamp(420px, 116vw, 1120px);
        margin-top: clamp(-6px, -1vw, 0px);
        overflow: hidden;
        position: absolute;
        height: auto;
        top: 35px;
        z-index: -1;
        right: 0;}
  .sun-disc {width: 42%;right: 9%;top: 0%;}
  .bridge {left: 0;top: 34%;width: 100%;opacity: 1;}
  .memorial {right: -38%;top: 18%;width: 86%;opacity: 0.7;}
  .model { width: 34%; right: 15%; top: 8%; }
  .taxi {right: -15%;bottom: 20%;width: 30%;}
  .product-cluster { right: 7%; bottom: 0; width: 42%; height: 48%; }
  .ingredient-turmeric { left: -4%; width: 40%; }
  .ingredient-aloe { right: -2%; width: 34%; }

  .steps {
    width: min(100%, 820px);
    justify-self: center;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid rgba(197, 127, 31, 0.26);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 249, 238, 0.86);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
  }
  .step-card {
	min-height: auto;
	-ms-grid-columns: 84px clamp(14px, 4vw, 24px) 1fr clamp(14px, 4vw, 24px) 26px;
	grid-template-columns: 84px 1fr 26px;
	gap: clamp(14px, 4vw, 24px);
	padding: 15px;
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-box-shadow: none;
			box-shadow: none;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
  }
  .step-card + .step-card { border-top: 1px solid rgba(189, 119, 28, 0.22); }
  .step-card img { width: 130px; }
  .step-card h2 {font-family: Inter, ui-sans-serif, system-ui, sans-serif;font-size: 27px;letter-spacing: -0.04em;margin-bottom: 10px;font-weight: 500;width: 70%; }
	.step-card h2:before{display: none}
  .step-card p { font-size: clamp(.98rem, 3vw, 1.25rem); font-weight: 500;}
  .chev { display: block; color: #ca7909; font-size: 4rem; line-height: .45; align-self: center;position: absolute;right: 30px; }

  .action-panel { width: min(100%, 760px); justify-self: center; margin-top: 22px; gap: 14px; }
  .countdown-card { min-height: 92px; padding-inline: clamp(18px, 4vw, 32px); border-radius: 20px; }
  .later-btn { min-height: 56px; width: min(78%, 520px); }
  .trust-strip { margin-top: 14px; width: min(100%, 520px); }
	.headline-block {padding-bottom: 300px;}
	.brand img {width: 280px;}
	.brand-line {font-size: 12px;}
	#main-title{font-size: 77px;max-width: 100%;line-height: 70px;}
	.bird-a {left: 48%;}
	.bird-b {top: 16%;left: 48%;}
	.sun-disc {width: 43%;right: 7%;top: 0%;}
	.bird-c {top: 37%;left: 51%;}
	.product-turmeric {left: -145px;-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);}
	.product-turmeric {left: -115px;transform: scale(1.7);bottom: 42%;}
	.copy-panel {padding-bottom: 160px;}
	.hero{overflow-x: hidden}
	body{overflow-x: hidden}
}
@media (max-width: 900px) {
	#main-title {font-size: 70px;}
	.lead {font-size: 24px;}
	.hero {overflow: hidden;box-sizing: border-box;}
	.copy-panel {padding-bottom: 110px;}
	.action-panel {overflow: hidden;}
	.headline-block {width: auto;}
}
@media (max-width: 860px) {
	.copy-panel {padding-bottom: 71px;}
	#main-title {font-size: 65px;}
	.lead {font-size: 20px;}
}
@media (max-width: 810px) {
	.copy-panel {padding: 30px 30px 40px 30px;}
	.hero {padding: 0;}
	.steps {padding: 0;width: min(100%, 750px);}
	.action-panel {width: min(100%, 750px);}
}
@media (max-width: 780px) {
	.kicker {font-size: 30px;}
	#main-title {font-size: 55px;line-height: 60px;font-weight: 800;}
	.steps, .action-panel {width: 92%;}
	.step-card div{width: 60%}
	.step-card h2 {font-size: 25px;}
}
@media (max-width: 748px) {
	.lead {font-size: 18px;width: 40%;}
	#main-title {font-size: 50px;line-height: 55px;}
}
@media (max-width: 710px) {
	.headline-block {padding-bottom: 260px;}
	.step-card h2 {font-size: 22px;line-height: 27px;}
	.step-card p {font-size: 18px;}
}
@media (max-width: 681px) {
	.step-card img {width: 100px;}
	.whatsapp-btn b {font-size: 25px;}
	.brand img {width: 210px;}
	.brand-line {font-size: 9px;}
}
@media (max-width: 656px) {
	.headline-block {padding-bottom: 235px;}
}
@media (max-width: 650px) {
	.headline-block {padding-bottom: 205px;}
	.step-card h2 {font-size: 20px;line-height: 25px;}
	.step-card img {width: 90px;}
	.step-card p {font-size: 15px;}
	.whatsapp-btn b {font-size: 21px;}
	.whatsapp-btn small {font-size: 13px;}
	.kicker {font-size: 25px;}
	#main-title {font-size: 40px;line-height: 45px;}
}
@media (max-width: 604px) {
	.headline-block {padding-bottom: 187px;}
}
@media (max-width: 582px) {
	.headline-block {padding-bottom: 165px;}
	.bird-c {left: 45%;}
	.product-cluster {right: -6%;}
	.model {right: 14%;}
}
@media (max-width: 564px) {
	.headline-block {padding-bottom: 125px;}
}
@media (max-width: 540px) {
	.headline-block {padding-bottom: 101px;}
	.step-card div {width: 68%;}
	.copy-panel {padding: 20px 20px 20px 20px;}
	.whatsapp-btn b {font-size: 19px;}
}
@media (max-width: 508px) {
	#main-title {font-size: 33px;line-height: 35px;}
	.lead {font-size: 16px;width: 55%;}
	.headline-block {padding-bottom: 201px;}
	.product-cluster {width: 35%;height: 40%;}
}
@media (max-width: 490px) {
	.headline-block {padding-bottom: 176px;}
	.brand img {width: 160px;}
	.brand-line {font-size: 7px;}
	.chev {right: 10px;}
	.step-card h2 {width: 100%;}
	.whatsapp-btn {min-height: auto;}
}
@media (max-width: 480px) {
	.product-cluster {width: 42%;height: 45%;right: -16%;}
}
@media (max-width: 464px) {
	.headline-block {
        padding-bottom: 155px;
    }
}
@media (max-width: 445px) {
	.headline-block {
        padding-bottom: 141px;
    }
	#main-title {font-size: 29px;line-height: 33px;}
	.gold-rule {
        margin-top: 5px;
        margin-bottom: 5px;
    }
	.product-cluster {
        width: 36%;
        height: 65%;
        right: -16%;
    }
	.taxi {
        bottom: 26%;
        width: 40%;
    }
	.kicker {font-size: 19px;}
	.brand {margin-bottom: clamp(14px, 1.8vw, 44px);}
	.bird-c {left: 25%;top: 57%;}
}
@media (max-width: 425px) {
	.model {right: 9%;}
	.sun-disc {width: 37%;right: 4%;}
	.copy-panel {padding: 20px 20px 0px 20px;}
}
@media (max-width: 412px) {
	.headline-block {
        padding-bottom: 125px;
    }
}
@media (max-width: 402px) {
	.lead {font-size: 13px;}
	.product-cluster {width: 40%;height: 37%;right: -17%;}
	.headline-block {padding-bottom: 215px;}
	.step-card{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
	.step-card h2, .step-card p{text-align: center}
	.chev {right: 0;position: initial;}
	.count-label {font-size: 14px;}
}
@media (max-width: 368px) {
	.art-stage {min-height: clamp(420px, 127vw, 1120px);}
}
@media (max-width: 350px) {
	.product-cluster {width: 53%;height: 39%;}
	.headline-block {padding-bottom: 175px;}
	.trust-strip {font-size: 12px;}
	.countdown-card {display: -webkit-box;display: -ms-flexbox;display: flex;padding-inline: clamp(8px, 4vw, 32px);}
}
@media (max-width: 330px) {
	.countdown-card {
        padding-inline: clamp(8px, 0vw, 32px);
    }
	.product-cluster {width: 48%;height: 30%;}
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}